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 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
cookie的secure属性详解
Apr 08 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php格式文件打开的四种方法
2018/02/24 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
element实现合并单元格通用方法
2019/11/13 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
python实现百度关键词排名查询
2014/03/30 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python队列原理及实现方法示例
2019/11/27 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
安全员岗位职责
2013/11/11 职场文书
领导干部培训感言
2014/01/23 职场文书
综合内勤岗位职责
2014/04/14 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL