|
|
今天仔細(xì)看了jquery tools 的tabs，下面結(jié)合其官方doucmentation做一下總結(jié)。
首先給出操作的目標(biāo)html代碼：
復(fù)制代碼 代碼如下:
<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>
該功能是通過(guò)jqueryObject.tabs()方法來(lái)實(shí)現(xiàn)的，其中tabs方法提供以下三種方式：
1. $("ul.tabs-t").tabs("div.tabsContent>div")//該方法能簡(jiǎn)單的將tabs組織起來(lái)
2. $("ul.tabs-t").tabs("div.tabsContent>div" ,{config object}) //該方法通過(guò)配置對(duì)象將tabs組織起來(lái)，適合多樣的tabs展示。
3. $("ul.tabs-t").tabs("div.tabsContent>div" ,callback function) //通過(guò)回調(diào)函數(shù)對(duì)tabs進(jìn)行進(jìn)一步操作。
下面就2中的config對(duì)象參數(shù)實(shí)現(xiàn)及描述做一下說(shuō)明：
復(fù)制代碼 代碼如下:
current:'current',//為當(dāng)前tab的增加的class名稱，默認(rèn)為current
effect:"fade",//每個(gè)tab的panel內(nèi)容顯示方式為從整體逐漸顯示
//effect:"slide",//點(diǎn)擊tab的panel出現(xiàn)在當(dāng)前tab的panel下面，并覆蓋掉當(dāng)前panel
//effect:"horizontal",//當(dāng)前tab的panel逐漸從右向左收縮并最終消失，點(diǎn)擊panel的內(nèi)容占據(jù)相應(yīng)位置，比較適合水平導(dǎo)航
fadeInSpeed:1000,//設(shè)置panel顯示的速度，設(shè)置該屬性在effect置為fade時(shí)有效，默認(rèn)值為200毫秒
event:"mouseover",//指定觸發(fā)tab切換的事件，默認(rèn)是單擊鼠標(biāo)，可選擇的觸發(fā)事件有“mouseover”,"dbclick"
history:true,//類似Javascript的history功能，默認(rèn)為false,當(dāng)用戶點(diǎn)擊瀏覽器的前進(jìn)后后退按鈕后，如果此處設(shè)置為true,那么就會(huì)回退到上次點(diǎn)擊的tab，而不是跳轉(zhuǎn)到其他頁(yè)面去
initialIndex:1,//設(shè)置默認(rèn)顯示的tab
tabs:"a",//設(shè)置tab對(duì)應(yīng)的標(biāo)簽元素，默認(rèn)為"a"，這里也可以設(shè)為"li",該處相當(dāng)于jquery的選擇器
api:false,//設(shè)置當(dāng)前tab所在容器的返回類型類型。如果為false(默認(rèn)值)，以jquery對(duì)象返回；否則，以js對(duì)象返回。如果存在多個(gè)值，返回最后一個(gè)值。
onBeforeClick:function( index){
//alert(this.getCurrentTab().text());//返回當(dāng)前tab的名稱
return true;
},//在tab被點(diǎn)擊之前調(diào)用的函數(shù)，如果該函數(shù)返回false,那么該tab不會(huì)被觸發(fā);返回的是一個(gè)tab對(duì)象，對(duì)于該對(duì)象的操作，參見(jiàn)tab相關(guān)方法；改返回函數(shù)有一個(gè)參數(shù)，為當(dāng)前tab的索引
onClick:function(index){
return true;
}//在tab被點(diǎn)擊的時(shí)候調(diào)用的函數(shù)，其他用法同onBeforeClick
更直觀的說(shuō)明如下：
| 屬性名稱 | 默認(rèn)值 | 描述 |
| current | 'current' | 為當(dāng)前tab的增加的class名稱 |
| effect | default' | fade':每個(gè)tab的panel內(nèi)容顯示方式為從整體逐漸顯示;面，并覆蓋掉當(dāng)前panel |
| 'slide':點(diǎn)擊tab的panel出現(xiàn)在當(dāng)前tab的panel下 | ||
| horizontal':當(dāng)前tab的panel逐漸從右向左收縮并最終消失，點(diǎn)擊panel的內(nèi)容占據(jù)相應(yīng)位置，比較適合水平導(dǎo)航 | ||
| fadeInSpeed | 200 | 設(shè)置panel顯示的速度，設(shè)置該屬性在effect置為fade時(shí)有效，默認(rèn)值為200毫秒 |
| event | 'click' | 指定觸發(fā)tab切換的事件，默認(rèn)是單擊鼠標(biāo)，可選擇的觸發(fā)事件有“mouseover”,"dbclick" |
| history | FALSE | 類似Javas |
| initialIndex | 0 | 設(shè)置默認(rèn)顯示的tab |
| tabs | a' | 設(shè)置tab對(duì)應(yīng)的標(biāo)簽元素，默認(rèn)為"a"，這里也可以設(shè)為"li",該處相當(dāng)于jquery的選擇器 |
| api | FALSE | 設(shè)置當(dāng)前tab所在容器的返回類型類型。如果為false(默認(rèn)值)，以jquery對(duì)象返回；否則，以js對(duì)象返回。如果存在多個(gè)值，返回最后一個(gè)值。 |
| on | null | 在tab被點(diǎn)擊之前調(diào)用的函數(shù)，如果該函數(shù)返回false,那么該tab不會(huì)被觸發(fā);返回的是一個(gè)tab對(duì)象，對(duì)于該對(duì)象的操作，參見(jiàn)tab相關(guān)方法；改返回函數(shù)有一個(gè)參數(shù)，為當(dāng)前tab的索引 |
| on | null | 在tab被點(diǎn)擊的時(shí)候調(diào)用的函數(shù)，其他用法同on |
復(fù)制代碼 代碼如下:
var api=$("ul.tabs-t").tabs();//先通過(guò)獲取tab容器獲取tab
//api.next();//跳轉(zhuǎn)到下一個(gè)tab
//api.click();
//alert(api.getConf().tabs);//返回api的配置對(duì)象，這里獲取配置對(duì)象的tabs屬性的值
api.getCurrentPane();//獲取當(dāng)前的panel
api.getCurrentTab();//獲取當(dāng)前tab
api.getIndex();//獲取當(dāng)前tab的index
//alert(api.getPanes());//獲取所有的panel
//alert(api.getTabs());//獲取所有的tab
api.prev();//跳轉(zhuǎn)到上一個(gè)tab
api.onBeforeClick=function(){
return true;
}//同配置對(duì)象的BeforeClick,一個(gè)對(duì)象可以綁定多個(gè)Beforeclick事件
api.onClick=function(){
return true;
}//同配置對(duì)象的Click，一個(gè)對(duì)象可以綁定多個(gè)Beforeclick事件
更直觀的說(shuō)明如下：
| 方法 | 返回值 | 描述 |
| getConf() | API | 返回api的配置對(duì)象 |
| getCurrentPane() | jQuery | 獲取當(dāng)前的panel |
| getCurrentTab() | jQuery | 獲取當(dāng)前tab |
| getIndex() | integer | 獲取當(dāng)前tab的index |
| getTabs() | jQuery | 獲取所有的tab |
| getPanes() | jQuery | 獲取所有的panel |
| next() | API | 跳轉(zhuǎn)到下一個(gè)tab |
| prev() | API | 跳轉(zhuǎn)到上一個(gè)tab |
| on | API | 同配置對(duì)象的BeforeClick,一個(gè)對(duì)象可以綁定多個(gè)Beforeclick事件 |
| on | API | //同配置對(duì)象的Click，一個(gè)對(duì)象可以綁定多個(gè)Beforeclick事件 |
最后，取其官方網(wǎng)站的幾張截圖作為本文的結(jié)尾。
1.普通的tabs
2.水平拓展的tabs
3. 類提示框
4.向?qū)?/P>
JavaScript技術(shù)：jquery tools之tabs 選項(xiàng)卡/頁(yè)簽，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
