jquery tools之tabs 選項(xiàng)卡/頁(yè)簽

2019-11-21 01:14:10

字體：大中小

供稿：網(wǎng)友

雖然方便好用，但是個(gè)人覺(jué)得其在UI方面的表現(xiàn)不是太出彩，今天無(wú)意中看到j(luò)query tools--一種基于jquery的UI表現(xiàn)框架，其UI功能展示風(fēng)格類(lèi)似（或模仿）flex。該框架提供了tabs（選項(xiàng)卡/頁(yè)簽）overlay(覆蓋層),tooltip（提示框）,scrollable（滾動(dòng)信息欄）,expose（突出顯示）,flahembed(視頻播放嵌入)六大類(lèi)功能（其官方網(wǎng)站自稱(chēng)為六大工具），這六大類(lèi)功能又是每個(gè)功能都有自己的獨(dú)立支持包，不相互干擾，用戶(hù)完全可以跟據(jù)自己需要下載，這樣就減少了js文件下載對(duì)頁(yè)面加載速度的影響。雖然功能不是很全面，但是可稱(chēng)得上少而精--都是目前比較常用的功能，而且能很好的彌補(bǔ)jquery ui的一些不足，從一定程度上加強(qiáng)了Jquery的UI功能。其實(shí)最讓我覺(jué)得欣賞的是那些類(lèi)flex的風(fēng)格，能在有效控制開(kāi)發(fā)成本的情況下大大增強(qiáng)用戶(hù)感受。
今天仔細(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名稱(chēng)，默認(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,//類(lèi)似javascript的history功能，默認(rèn)為false,當(dāng)用戶(hù)點(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所在容器的返回類(lèi)型類(lèi)型。如果為false(默認(rèn)值)，以jquery對(duì)象返回；否則，以js對(duì)象返回。如果存在多個(gè)值，返回最后一個(gè)值。 
onBeforeClick:function( index){ 
//alert(this.getCurrentTab().text());//返回當(dāng)前tab的名稱(chēng) 
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ō)明如下：

屬性名稱(chēng)	默認(rèn)值	描述
current	'current'	為當(dāng)前tab的增加的class名稱(chēng)
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	類(lèi)似javascript的history功能當(dāng)用戶(hù)點(diǎn)擊瀏覽器的前進(jìn)后后退按鈕后，如果此處設(shè)置為true,那么就會(huì)回退到上次點(diǎn)擊的tab，而不是跳轉(zhuǎn)到其他頁(yè)面去
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所在容器的返回類(lèi)型類(lèi)型。如果為false(默認(rèn)值)，以jquery對(duì)象返回；否則，以js對(duì)象返回。如果存在多個(gè)值，返回最后一個(gè)值。
onBeforeClick	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的索引
onClick	null	在tab被點(diǎn)擊的時(shí)候調(diào)用的函數(shù)，其他用法同onBeforeClick

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

復(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
onBeforeClick()	API	同配置對(duì)象的BeforeClick,一個(gè)對(duì)象可以綁定多個(gè)Beforeclick事件
onClick()	API	//同配置對(duì)象的Click，一個(gè)對(duì)象可以綁定多個(gè)Beforeclick事件