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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
JQuery select标签操作代码段
May 16 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
详解jQuery事件
Jan 13 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
Vue.js学习示例分享
Feb 05 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP查询网站的PR值
2013/10/30 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
js玩一玩WSH吧
2007/02/23 Javascript
js模拟弹出效果代码修正版
2008/08/07 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
js仿淘宝评价评分功能
2017/02/28 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python面试题小结附答案实例代码
2019/04/11 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
2014幼儿园保育员工作总结
2014/11/10 职场文书
个性发展自我评价2015
2015/03/09 职场文书
员工安全责任协议书
2016/03/22 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS