jquery tools之tabs 選項卡/頁簽

更新時間：2009年07月25日 14:46:36 作者：

jquery用這么久了，覺得雖然沒ExtJS等框架全面，功能強大，但是也確實做到了“the write less,do more”，而且學起來也方便，只需要仔細研讀一下它官方網(wǎng)站的API Reference,操作起來基本問題不是太大。

雖然方便好用，但是個人覺得其在UI方面的表現(xiàn)不是太出彩，今天無意中看到jquery tools--一種基于jquery的UI表現(xiàn)框架，其UI功能展示風格類似（或模仿）flex。該框架提供了tabs（選項卡/頁簽）overlay(覆蓋層),tooltip（提示框）,scrollable（滾動信息欄）,expose（突出顯示）,flahembed(視頻播放嵌入)六大類功能（其官方網(wǎng)站自稱為六大工具），這六大類功能又是每個功能都有自己的獨立支持包，不相互干擾，用戶完全可以跟據(jù)自己需要下載，這樣就減少了js文件下載對頁面加載速度的影響。雖然功能不是很全面，但是可稱得上少而精--都是目前比較常用的功能，而且能很好的彌補jquery ui的一些不足，從一定程度上加強了Jquery的UI功能。其實最讓我覺得欣賞的是那些類flex的風格，能在有效控制開發(fā)成本的情況下大大增強用戶感受。
今天仔細看了jquery tools 的tabs，下面結(jié)合其官方doucmentation做一下總結(jié)。
首先給出操作的目標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()方法來實現(xiàn)的，其中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) //通過回調(diào)函數(shù)對tabs進行進一步操作。
下面就2中的config對象參數(shù)實現(xiàn)及描述做一下說明：

復制代碼代碼如下:

 
current:'current',//為當前tab的增加的class名稱，默認為current 
effect:"fade",//每個tab的panel內(nèi)容顯示方式為從整體逐漸顯示 
//effect:"slide",//點擊tab的panel出現(xiàn)在當前tab的panel下面，并覆蓋掉當前panel 
//effect:"horizontal",//當前tab的panel逐漸從右向左收縮并最終消失，點擊panel的內(nèi)容占據(jù)相應位置，比較適合水平導航 
fadeInSpeed:1000,//設置panel顯示的速度，設置該屬性在effect置為fade時有效，默認值為200毫秒 
event:"mouseover",//指定觸發(fā)tab切換的事件，默認是單擊鼠標，可選擇的觸發(fā)事件有“mouseover”,"dbclick" 
history:true,//類似javascript的history功能，默認為false,當用戶點擊瀏覽器的前進后后退按鈕后，如果此處設置為true,那么就會回退到上次點擊的tab，而不是跳轉(zhuǎn)到其他頁面去 
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被點擊之前調(diào)用的函數(shù)，如果該函數(shù)返回false,那么該tab不會被觸發(fā);返回的是一個tab對象，對于該對象的操作，參見tab相關(guān)方法；改返回函數(shù)有一個參數(shù)，為當前tab的索引 
onClick:function(index){ 
return true; 
}//在tab被點擊的時候調(diào)用的函數(shù)，其他用法同onBeforeClick 

更直觀的說明如下：

屬性名稱	默認值	描述
current	'current'	為當前tab的增加的class名稱
effect	default'	fade':每個tab的panel內(nèi)容顯示方式為從整體逐漸顯示;面，并覆蓋掉當前panel
		'slide':點擊tab的panel出現(xiàn)在當前tab的panel下
		horizontal':當前tab的panel逐漸從右向左收縮并最終消失，點擊panel的內(nèi)容占據(jù)相應位置，比較適合水平導航
fadeInSpeed	200	設置panel顯示的速度，設置該屬性在effect置為fade時有效，默認值為200毫秒
event	'click'	指定觸發(fā)tab切換的事件，默認是單擊鼠標，可選擇的觸發(fā)事件有“mouseover”,"dbclick"
history	FALSE	類似javascript的history功能當用戶點擊瀏覽器的前進后后退按鈕后，如果此處設置為true,那么就會回退到上次點擊的tab，而不是跳轉(zhuǎn)到其他頁面去
initialIndex	0	設置默認顯示的tab
tabs	a'	設置tab對應的標簽元素，默認為"a"，這里也可以設為"li",該處相當于jquery的選擇器
api	FALSE	設置當前tab所在容器的返回類型類型。如果為false(默認值)，以jquery對象返回；否則，以js對象返回。如果存在多個值，返回最后一個值。
onBeforeClick	null	在tab被點擊之前調(diào)用的函數(shù)，如果該函數(shù)返回false,那么該tab不會被觸發(fā);返回的是一個tab對象，對于該對象的操作，參見tab相關(guān)方法；改返回函數(shù)有一個參數(shù)，為當前tab的索引
onClick	null	在tab被點擊的時候調(diào)用的函數(shù)，其他用法同onBeforeClick

此外，tabs也提供了獲取tabs的一系列方法，具體實現(xiàn)及說明如下：

復制代碼代碼如下:

 
var api=$("ul.tabs-t").tabs();//先通過獲取tab容器獲取tab 
//api.next();//跳轉(zhuǎn)到下一個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();//跳轉(zhuǎn)到上一個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	跳轉(zhuǎn)到下一個tab
prev()	API	跳轉(zhuǎn)到上一個tab
onBeforeClick()	API	同配置對象的BeforeClick,一個對象可以綁定多個Beforeclick事件
onClick()	API	//同配置對象的Click，一個對象可以綁定多個Beforeclick事件