jquery tools之tabs 选项卡/页签


Posted in Javascript onJuly 25, 2009

虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex。该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了js文件下载对页面加载速度的影响。虽然功能不是很全面,但是可称得上少而精--都是目前比较常用的功能,而且能很好的弥补jquery ui的一些不足,从一定程度上加强了Jquery的UI功能。其实最让我觉得欣赏的是那些类flex的风格,能在有效控制开发成本的情况下大大增强用户感受。
今天仔细看了jquery tools 的tabs,下面结合其官方doucmentation做一下总结。
首先给出操作的目标html代码:

<body> 
<ul class="tabs-t"> 
<li><a href="#first">tab1</a></li> 
<li><a href="#second">tab2</a></li> 
<li><a href="#third">tab3</a></li> 
</ul> 
<div class="tabsContent "> 
<div> 
<p> 
Here you can see tabs in action. They are the most popular user-interface component on the web. And for good reason: they are intuitive to use, people are used to them, and above all your can organize your pages more friendly. 
</p> 
tabl content<a href="#second">open table2</a></div> 
<div> 
<p> 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed lorem. Aenean commodo pede a eros volutpat viverra. Pellentesque a nisl. Nullam et metus. 
</p> 
tab2 content<a href="#third">open table3</a></div> 
<div> 
<p> 
Praesent dictum, velit vel adipiscing suscipit, metus nisl lobortis sem, nec elementum nibh urna non turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. 
</p> 
tab3 content</div> 
</div> 
</body>

该功能是通过jqueryObject.tabs()方法来实现的,其中tabs方法提供以下三种方式:
1. $("ul.tabs-t").tabs("div.tabsContent>div")//该方法能简单的将tabs组织起来
2. $("ul.tabs-t").tabs("div.tabsContent>div" ,{config object}) //该方法通过配置对象将tabs组织起来,适合多样的tabs展示。
3. $("ul.tabs-t").tabs("div.tabsContent>div" ,callback function) //通过回调函数对tabs进行进一步操作。
下面就2中的config对象参数实现及描述做一下说明:
current:'current',//为当前tab的增加的class名称,默认为current 
effect:"fade",//每个tab的panel内容显示方式为从整体逐渐显示 
//effect:"slide",//点击tab的panel出现在当前tab的panel下面,并覆盖掉当前panel 
//effect:"horizontal",//当前tab的panel逐渐从右向左收缩并最终消失,点击panel的内容占据相应位置,比较适合水平导航 
fadeInSpeed:1000,//设置panel显示的速度,设置该属性在effect置为fade时有效,默认值为200毫秒 
event:"mouseover",//指定触发tab切换的事件,默认是单击鼠标,可选择的触发事件有“mouseover”,"dbclick" 
history:true,//类似javascript的history功能,默认为false,当用户点击浏览器的前进后后退按钮后,如果此处设置为true,那么就会回退到上次点击的tab,而不是跳转到其他页面去 
initialIndex:1,//设置默认显示的tab 
tabs:"a",//设置tab对应的标签元素,默认为"a",这里也可以设为"li",该处相当于jquery的选择器 
api:false,//设置当前tab所在容器的返回类型类型。如果为false(默认值),以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。 
onBeforeClick:function( index){ 
//alert(this.getCurrentTab().text());//返回当前tab的名称 
return true; 
},//在tab被点击之前调用的函数,如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象,对于该对象的操作,参见tab相关方法;改返回函数有一个参数,为当前tab的索引 
onClick:function(index){ 
return true; 
}//在tab被点击的时候调用的函数,其他用法同onBeforeClick

更直观的说明如下:
属性名称 默认值 描述
current 'current' 为当前tab的增加的class名称
effect default' fade':每个tab的panel内容显示方式为从整体逐渐显示;面,并覆盖掉当前panel
'slide':点击tab的panel出现在当前tab的panel下
horizontal':当前tab的panel逐渐从右向左收缩并最终消失,点击panel的内容占据相应位置,比较适合水平导航
fadeInSpeed 200 设置panel显示的速度,设置该属性在effect置为fade时有效,默认值为200毫秒
event 'click' 指定触发tab切换的事件,默认是单击鼠标,可选择的触发事件有“mouseover”,"dbclick"
history FALSE 类似javascript的history功能当用户点击浏览器的前进后后退按钮后,如果此处设置为true,那么就会回退到上次点击的tab,而不是跳转到其他页面去
initialIndex 0 设置默认显示的tab
tabs a' 设置tab对应的标签元素,默认为"a",这里也可以设为"li",该处相当于jquery的选择器
api FALSE 设置当前tab所在容器的返回类型类型。如果为false(默认值),以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。
onBeforeClick null 在tab被点击之前调用的函数,如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象,对于该对象的操作,参见tab相关方法;改返回函数有一个参数,为当前tab的索引
onClick null 在tab被点击的时候调用的函数,其他用法同onBeforeClick
此外,tabs也提供了获取tabs的一系列方法,具体实现及说明如下:
var api=$("ul.tabs-t").tabs();//先通过获取tab容器获取tab 
//api.next();//跳转到下一个tab 
//api.click(); 
//alert(api.getConf().tabs);//返回api的配置对象,这里获取配置对象的tabs属性的值 
api.getCurrentPane();//获取当前的panel 
api.getCurrentTab();//获取当前tab 
api.getIndex();//获取当前tab的index 
//alert(api.getPanes());//获取所有的panel 
//alert(api.getTabs());//获取所有的tab 
api.prev();//跳转到上一个tab 
api.onBeforeClick=function(){ 
return true; 
}//同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件 
api.onClick=function(){ 
return true; 
}//同配置对象的Click,一个对象可以绑定多个Beforeclick事件

 更直观的说明如下:

方法 返回值 描述
getConf() API 返回api的配置对象
getCurrentPane() jQuery 获取当前的panel
getCurrentTab() jQuery 获取当前tab
getIndex() integer 获取当前tab的index
getTabs() jQuery 获取所有的tab
getPanes() jQuery 获取所有的panel
next() API 跳转到下一个tab
prev() API 跳转到上一个tab
onBeforeClick() API 同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
onClick() API //同配置对象的Click,一个对象可以绑定多个Beforeclick事件

最后,取其官方网站的几张截图作为本文的结尾。

1.普通的tabs

jquery tools之tabs 选项卡/页签

2.水平拓展的tabs

jquery tools之tabs 选项卡/页签

3. 类提示框

jquery tools之tabs 选项卡/页签

4.向导

jquery tools之tabs 选项卡/页签

Javascript 相关文章推荐
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
字符串反转_JavaScript
Apr 28 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
jquery JSON的解析方式
Jul 25 #Javascript
jqPlot Option配置对象详解
Jul 25 #Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 #Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 #Javascript
从父页面读取和操作iframe中内容方法
Jul 25 #Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 #Javascript
JavaScript中null与undefined分析
Jul 25 #Javascript
You might like
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
Less 安装及基本用法
2018/05/05 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
python中cPickle用法例子分享
2014/01/03 Python
跟老齐学Python之Import 模块
2014/10/13 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
小学红领巾中秋节广播稿
2014/01/13 职场文书
二手房购房意向书范本
2014/04/01 职场文书
要账委托书范本
2014/09/15 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
法定代表人资格证明书
2015/06/18 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书