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=& ...
随机推荐
- Zabbix 关联onealert实现电话报警
Zabbix 关联onealert实现电话报警 系统环境:Linux Centos 7.4 应用版本:Zabbix 3.0.22 OneAlert官方地址:http://www.onealert.co ...
- 20145216 史婧瑶《Java程序设计》第6周学习总结
20145216 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1 InputStream与OutputStream 如果要将数据从来源中取出,可以使用输 ...
- MYSQL数据库里面的所有密码批量MD5加密
如果你的字段够长度的话:UPDATE users SET password = MD5(password);如果长度不够,可以先增加长度后再做,或者多建一列,完成后删除原来的列!(如passwd)UP ...
- Sublime使用记录之SublimeServer插件介绍
Sublime使用记录之SublimeServer插件介绍 介绍:sublimeServer
- 【网络结构】GoogLeNet inception-v1:Going deeper with convolutions论文笔记
目录 0. 论文链接 1. 概述 2. inception 3. GoogleNet 参考链接 @ 0. 论文链接 1. 概述 GoogLeNet是谷歌团队提出的一种大体保持计算资源不变的前提下, ...
- 自学Java测试代码 - 简单地Student类
2017-08-23 23:45:38 writer:pprp 写这个还蛮开心的 package test; public class Student { //创建成员变量 String name ...
- LeetCode第[91]题(Java)：Decode Ways（解码方法数）
题目:解码方法数 难度:Medium 题目内容: A message containing letters from A-Z is being encoded to numbers using the ...
- PHP数组合并：[“＋”运算符]、[array_merge]、[array_merge_recursive]区别
1.“+”运算符规则: 当两个数组的键名是数字键名或者字符串键名 $c = $a + $b 在$a后追加($b在$a中不存在的键名)键名和值注意: 1.不覆盖,只是追加不存在的键名和对应的值 2.键名 ...
- mysql数据库优化课程---17、mysql索引优化
mysql数据库优化课程---17.mysql索引优化 一.总结 一句话总结:一些字段可能会使索引失效,比如like,or等 1.check表监测的使用场景是什么? 视图 视图建立在两个表上, 删除了 ...
- mysql 命令行参数说明
mysql --help -h : 主机名 -u : 用户名 -p : 密码 -P : 端口,不写默认(3306) -D :指定数据库(一般不指定) -e :查询语句 --column-names : ...