jQuery 滑动选项卡jQuery tabulous.js
A jQuery tabs module for todays web!
实例DEMO
Documentation
Tabulous.js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.
..:: Getting Started
Include the relevant files
Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before <head> section
Create the tabs
<divid="tabs"><ul><li><ahref="#tabs-1"title="">Tab 1</a></li><li><ahref="#tabs-2"title="">Tab 2</a></li><li><ahref="#tabs-3"title="">Tab 3</a></li></ul><divid="tabs_container"><divid="tabs-1"><!--tab content--></div><divid="tabs-2"><!--tab content--></div><divid="tabs-3"><!--tab content--></div></div><!--End tabs container--></div><!--End tabs-->
Initiate the plugin
Once you have created your tabs you will need to initiate the plugin.
At its most basic level you can initiate the plugin like:
$(document).ready(function($){$('#tabs').tabulous();});
If you want to initiate the plugin with options then you can do so like:
$('#tabs').tabulous({effect:'scale'});
..:: Options
| Variable | Default Value | Description | Valid Options |
|---|---|---|---|
| effect | scale | The effect to use for the transition | scale / slideLeft / scaleUp / flip |
jQuery 滑动选项卡jQuery tabulous.js的更多相关文章
- jQuery 滑动选项卡jQuery tabslet
Tabslet Yet another jQuery plugin for tabs, lightweight, easy to use and with some extra features ...
- jQuery 滑动选项卡SmartTab
Smart Tab Overview Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy t ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- Jquery实现选项卡功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery滑动并响应事件
jQuery滑动并打开指定页面: <!DOCTYPE html> <html> <head> <script src="http://code.jq ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- 基于jQuery滑动分步式进度导航条代码
分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=& ...
随机推荐
- Python3.x：报错POST data should be bytes, an iterable of bytes
Python3.x:报错POST data should be bytes, an iterable of bytes 问题: python3.x:报错 POST data should be byt ...
- 《面向对象的JavaScript》读书笔记
发现了2004年出版的一本好书,用两天快速刷了一遍,草草整理了一下笔记,在此备忘. 类:对象的设计蓝图或制作配方. 对象 === 实例 :老鹰是鸟类的一个实例 基于相同的类创建出许多不同的对象,类更多 ...
- 配置linux内核输出所有的log信息
答案:修改内核文件include/linux/printk.h (内核版本为4.9) 修改前 #define CONSOLE_LOGLEVEL_DEFAULT 7 /* anything MORE ...
- jsp中获取list长度
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ tag ...
- webservice的cxf和spring整合发布
1.新建一个web项目 2.导入cxf相应的jar包,并部署到项目中 3.服务接口 package com.xiaostudy; /** * @desc 服务器接口 * @author xiaostu ...
- C# 同步调用、异步调用、异步回调
本文将主要通过“同步调用”.“异步调用”.“异步回调”三个示例来讲解在用委托执行同一个“加法类”的时候的的区别和利弊. 首先,通过代码定义一个委托和下面三个示例将要调用的方法: public dele ...
- poj 2528 Mayor's posters 线段树+离散化 || hihocode #1079 离散化
Mayor's posters Description The citizens of Bytetown, AB, could not stand that the candidates in the ...
- 简单搭建FastDFS分布式文件系统(简单易懂)
一.什么是FastDFS FastDFS一个开源的轻量级分布式文件系统,它对文件进行管理,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,功能包括:文件存储.文件同步.文件访 ...
- MVVM架构简单使用
版权声明:本文为博主原创文章,未经博主授权不得转载. 项目github地址 https://github.com/zhangjiahuan8888/mvvmDemo/tree/master 开篇 MV ...
- H5唤起app
H5唤起app 1.判断是否在微信中打开 无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽sc ...