jquery tools之tabs 選項卡/頁簽
編輯：JQuery特效代碼
雖然方便好用，但是個人覺得其在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
更直觀的說明如下：
cript的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事件
BeforeClick()
API
同配置對象的BeforeClick,一個對象可以綁定多個Beforeclick事件
onClick()
API
//同配置對象的Click，一個對象可以綁定多個Beforeclick事件
今天仔細看了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
更直觀的說明如下：
代碼如下:
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事件
更直觀的說明如下：
最後，取其官方網站的幾張截圖作為本文的結尾。
1.普通的tabs
2.水平拓展的tabs
3. 類提示框
4.向導
小編推薦
熱門推薦