jquery tools之tabs 选项卡/页签(2)

'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(选项卡/页签) - gaoyusi - My code life

2.水平拓展的tabs

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwydg.html