雖然方便好用，但是個人覺得其在UI方面的表現不是太出彩，今天無意中看到jquery tools--一種基于jquery的UI表現框架，其UI功能展示風格類似（或模仿）flex。該框架提供了tabs（選項卡/頁簽）overlay(覆蓋層),tooltip（提示框）,scrollable（滾動信息欄）,expose（突出顯示）,flahembed(視頻播放嵌入)六大類功能（其官方網站自稱為六大工具），這六大類功能又是每個功能都有自己的獨立支持包，不相互干擾，用戶完全可以跟據自己需要下載，這樣就減少了js文件下載對頁面加載速度的影響。雖然功能不是很全面，但是可稱得上少而精--都是目前比較常用的功能，而且能很好的彌補jquery ui的一些不足，從一定程度上加強了Jquery的UI功能。其實最讓我覺得欣賞的是那些類flex的風格，能在有效控制開發成本的情況下大大增強用戶感受。
今天仔細看了jquery tools 的tabs，下面結合其官方doucmentation做一下總結。
首先給出操作的目標html代碼：
代碼如下:
tab1 tab2 tab3
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.
tabl contentopen table2
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.
tab2 contentopen table3
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.
tab3 content
該功能是通過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
2.水平拓展的tabs
3. 類提示框
4.向導
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
