jQuery Tools tab使用介绍


Posted in Javascript onJuly 14, 2012

先给个官方例子。可以先弄出来看看效果
html

<!DOCTYPE html> 
<html> 
<!-- 
This is a jQuery Tools standalone demo. Feel free to copy/paste. 
http://flowplayer.org/tools/demos/ 
--> 
<head> 
<title>jQuery Tools standalone demo</title> 
<!-- include the Tools --> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<!-- standalone page styling (can be removed) --> 
<link rel="shortcut icon" href="/media/img/favicon.ico"> 
<link rel="stylesheet" type="text/css" 
href="./tabs-no-images.css"/> 
</head> 
<body><!-- tabs --> 
<ul id="tabui" class="cs-tabs"> 
<li><a id="t1" href="#tab1">Tab 1</a></li> 
<li><a id="t2" href="#tab2">Second tab</a></li> 
<li><a id="t3" href="#tab3">A ultra long third tab</a></li> 
</ul> 
<!-- panes --> 
<div id="tabpans" class="cs-panes"> 
<div> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
viverra, leo sit amet auctor fermentum, risus lorem posuere 
tortor, in accumsan purus magna imperdiet sem. 
</p> 
<p> 
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas 
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus 
nibh metus, faucibus quis, semper ut, dignissim id, diam. 
</p> 
</div> 
<div> 
<p> 
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, 
molestie sed, tristique sit amet, blandit eu, turpis. Mauris 
hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed 
molestie dui quam vitae dui. 
</p> 
<p> 
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget 
tortor. Maecenas id augue. Vivamus interdum nulla ac 
dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus 
eget dui volutpat molestie. 
</p> 
</div> 
<div> 
<p> 
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam 
imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, 
nisl. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. 
</p> 
<p> 
In sed dolor. Etiam eget quam ac nibh pharetra 
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu 
mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis 
nisi. Vivamus at enim. Integer semper imperdiet 
massa. Vestibulum nulla massa, pretium quis, porta id, 
vestibulum vitae, velit. 
</p> 
</div> 
</div> 
<!-- activate tabs with JavaScript --> 
<script> 
$(function() { 
// :first selector is optional if you have only one tabs on the page 
$(".cs-tabs:first").tabs(".cs-panes:first > div"); 
}); 
</script> 
</body> 
</html>

css
/* root element for tabs */ 
ul.cs-tabs { 
margin:0 !important; 
padding:0; 
height:30px; 
border-bottom:1px solid #666; 
} 
/* single tab */ 
ul.cs-tabs li { 
float:left; 
padding:0; 
margin:0; 
list-style-type:none; 
} 
/* link inside the tab. uses a background image */ 
ul.cs-tabs a { 
float:left; 
font-size:13px; 
display:block; 
padding:5px 30px; 
text-decoration:none; 
border:1px solid #666; 
border-bottom:0px; 
height:18px; 
background-color:#efefef; 
color:#777; 
margin-right:2px; 
position:relative; 
top:1px; 
outline:0; 
-moz-border-radius:4px 4px 0 0; 
} 
ul.cs-tabs a:hover { 
background-color:#F7F7F7; 
color:#333; 
} 
/* selected tab */ 
ul.cs-tabs a.on { 
background-color:#ddd; 
border-bottom:1px solid #ddd; 
color:#000; 
cursor:default; 
} 
/* tab pane */ 
.cs-panes div { 
display:none; 
border:1px solid #666; 
border-width:0 1px 1px 1px; 
min-height:150px; 
padding:15px 20px; 
background-color:#ddd; 
}

该功能是通过jqueryObject.tabs()方法来实现的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class,我对div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
这两个同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果

是不是很强大呢。

下面就以上配置参数说明描述如下:

属性名称 默认 值 描述
current 'current' CSS类名当前活跃的选项卡。
effect 'default' 效果被用来当点击一个选项卡。 这可以 戏剧性地改变这种行为的选项卡。 这是 可用的内置的效果: 'default' :一个简单的显示/隐藏效果。 这个 标签的默认行为。 'fade' :这个选项卡内容逐渐显示 从零到完全不透明。 'ajax' :从服务器加载选项卡内容 使用AJAX。 视图 示例 。 'slide' :垂直滑动效果,合适的 对于 手风琴导航 。 'horizontal' :水平的幻灯片效果, 合适的 对于 水平 手风琴导航 。 你也可以 让自己的效果 。
event 'click' 指定事件一个选项卡时打开。 默认情况下,这个 发生在当用户单击选项卡。 另一个有效值 是 “mouseover” 和 ‘dblclick' 。
fadeInSpeed 200 自从1.0.1。 唯一可用一起使用时 与“fade”效应。 该属性定义了加快( 毫秒)打开的面板中显示其内容。
fadeOutSpeed 0 自从1.1.0版。 唯一可用一起使用时 与“fade”效应。 该属性定义了加快( 毫秒)打开窗格中隐藏了它的内容。 一个积极的 这里的价值将导致“crossfade”作用 演示了 这里 。
history false 自从1.2.0 。 浏览器的支持 “后退按钮”,这样当用户点击后退或前进 按钮打开相应的选项卡。 要求 这个 历史工具 是 包括在你的页面。
initialIndex 0 指定选项,最初打开当页面 加载。 这将自动触发一个 点击 事件 为选项卡指定在本 财产。 指定 null 或者一个负数这里 不会触发 点击 事件在页面加载 导致所有选项卡最初将关闭。
rotate false 自从1.1.0版。 当最后一个选项卡是开放和 这个 next() 调用API调用,然后选项卡将 从头开始,当第一个选项卡是开放和 这个 上一页() 调用调用选项卡将提前 最后一个选项卡。 这是证明 在 这里 。
tabs 'a' 一个选择器进行元素,用作标签在根 元素。 如果没有发现然后的直接子根 元素用于为选项卡。

事件
事件 触发时间
onBeforeClick 点击一个标签之前。 第二个参数是指数 被单击的选项卡。
onClick 点击后一个选项卡。 第二个参数是指数 点击的选项。
脚本 API
下面的示例说明如何访问API:
var api = $("#tabui").data("tabs"); 
// advance to the next tab 
api.next();

以下列出的是所有API方法:
方法 返回值 描述/例子
click(index) API 激活选项卡中指定的参数。 参数可以是 要么是 整数 数字指定标签指数 (从0开始),或者当选项卡 一个 标记,它 可以 href 属性作为 援引 字符串 。
destroy() API 自从1.2.3 完全删除现有的标签 实例。
getConf() Object 自从1.0.1。 返回配置对象 标签的实例。 这个对象可以被修改, 变化是动态地反映在行为上的标签。
getCurrentPane() jQuery 返回当前面板作为jQuery对象。
getCurrentTab() jQuery 返回当前标签作为一个jQuery对象。
getIndex() integer 返回当前选项卡指数。
getPanes() jQuery 返回jQuery对象窗格作为。
getTabs() jQuery 返回标签作为一个jQuery对象。
next() API 前进到下一个选项卡。
prev() API 进步到以前的选项卡。
Javascript 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
JavaScript前端面试组合函数
Jun 21 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 #Javascript
jQuery Tools tooltip使用说明
Jul 14 #Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 #Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 #Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 #Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 #Javascript
js原型链原理看图说明
Jul 07 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
angular.bind使用心得
2015/10/26 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
Python 功能和特点(新手必学)
2015/12/30 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
python简单实现插入排序实例代码
2020/12/16 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
交通事故委托书范本
2014/09/28 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书