快捷導(dǎo)航

jQuery Tools tab使用介紹

更新時間：2012年07月14日 11:33:06 作者：

jQuery Tools tab使用介紹，需要的朋友可以參考下

先給個官方例子?？梢韵扰鰜砜纯葱Ч?
html

 
<!DOCTYPE html> 
<html> 
<!-- 
This is a jQuery Tools standalone demo. Feel free to copy/paste. 
http://flowplayer.org/tools/demos/ 
--> 
<head> 
<title>jQuery Tools standalone demo</title> 
<!-- include the Tools --> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<!-- standalone page styling (can be removed) --> 
<link rel="shortcut icon" href="/media/img/favicon.ico"> 
<link rel="stylesheet" type="text/css" 
href="./tabs-no-images.css"/> 
</head> 
<body><!-- tabs --> 
<ul id="tabui" class="cs-tabs"> 
<li><a id="t1" href="#tab1">Tab 1</a></li> 
<li><a id="t2" href="#tab2">Second tab</a></li> 
<li><a id="t3" href="#tab3">A ultra long third tab</a></li> 
</ul> 
<!-- panes --> 
<div id="tabpans" class="cs-panes"> 
<div> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
viverra, leo sit amet auctor fermentum, risus lorem posuere 
tortor, in accumsan purus magna imperdiet sem. 
</p> 
<p> 
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas 
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus 
nibh metus, faucibus quis, semper ut, dignissim id, diam. 
</p> 
</div> 
<div> 
<p> 
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, 
molestie sed, tristique sit amet, blandit eu, turpis. Mauris 
hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed 
molestie dui quam vitae dui. 
</p> 
<p> 
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget 
tortor. Maecenas id augue. Vivamus interdum nulla ac 
dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus 
eget dui volutpat molestie. 
</p> 
</div> 
<div> 
<p> 
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam 
imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, 
nisl. Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. 
</p> 
<p> 
In sed dolor. Etiam eget quam ac nibh pharetra 
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu 
mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis 
nisi. Vivamus at enim. Integer semper imperdiet 
massa. Vestibulum nulla massa, pretium quis, porta id, 
vestibulum vitae, velit. 
</p> 
</div> 
</div> 
<!-- activate tabs with JavaScript --> 
<script> 
$(function() { 
// :first selector is optional if you have only one tabs on the page 
　　$(".cs-tabs:first").tabs(".cs-panes:first > div"); 
}); 
</script> 
</body> 
</html> 

css

復(fù)制代碼代碼如下:

 
/* root element for tabs */ 
ul.cs-tabs { 
margin:0 !important; 
padding:0; 
height:30px; 
border-bottom:1px solid #666; 
} 
/* single tab */ 
ul.cs-tabs li { 
float:left; 
padding:0; 
margin:0; 
list-style-type:none; 
} 
/* link inside the tab. uses a background image */ 
ul.cs-tabs a { 
float:left; 
font-size:13px; 
display:block; 
padding:5px 30px; 
text-decoration:none; 
border:1px solid #666; 
border-bottom:0px; 
height:18px; 
background-color:#efefef; 
color:#777; 
margin-right:2px; 
position:relative; 
top:1px; 
outline:0; 
-moz-border-radius:4px 4px 0 0; 
} 
ul.cs-tabs a:hover { 
background-color:#F7F7F7; 
color:#333; 
} 
/* selected tab */ 
ul.cs-tabs a.on { 
background-color:#ddd; 
border-bottom:1px solid #ddd; 
color:#000; 
cursor:default; 
} 
/* tab pane */ 
.cs-panes div { 
display:none; 
border:1px solid #666; 
border-width:0 1px 1px 1px; 
min-height:150px; 
padding:15px 20px; 
background-color:#ddd; 
} 

該功能是通過jqueryObject.tabs()方法來實(shí)現(xiàn)的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class，我對div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
這兩個同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
　　是不是很強(qiáng)大呢。
　　下面就以上配置參數(shù)說明描述如下：

屬性名稱	默認(rèn) 值	描述
current	'current'	CSS類名當(dāng)前活躍的選項(xiàng)卡。
effect	'default'	效果被用來當(dāng)點(diǎn)擊一個選項(xiàng)卡。這可以戲劇性地改變這種行為的選項(xiàng)卡。這是可用的內(nèi)置的效果: `'default'` :一個簡單的顯示/隱藏效果。這個標(biāo)簽的默認(rèn)行為。 `'fade'` :這個選項(xiàng)卡內(nèi)容逐漸顯示從零到完全不透明。 `'ajax'` :從服務(wù)器加載選項(xiàng)卡內(nèi)容使用AJAX。視圖示例。 `'slide'` :垂直滑動效果,合適的對于手風(fēng)琴導(dǎo)航。 `'horizontal'` :水平的幻燈片效果, 合適的對于水平手風(fēng)琴導(dǎo)航。你也可以讓自己的效果。
event	'click'	指定事件一個選項(xiàng)卡時打開。默認(rèn)情況下,這個發(fā)生在當(dāng)用戶單擊選項(xiàng)卡。另一個有效值是 `“mouseover”` 和 `‘dblclick'` 。
fadeInSpeed	200	自從1.0.1。唯一可用一起使用時與“fade”效應(yīng)。該屬性定義了加快( 毫秒)打開的面板中顯示其內(nèi)容。
fadeOutSpeed	`0`	自從1.1.0版。唯一可用一起使用時與“fade”效應(yīng)。該屬性定義了加快( 毫秒)打開窗格中隱藏了它的內(nèi)容。一個積極的這里的價(jià)值將導(dǎo)致“crossfade”作用演示了這里。
history	false	自從1.2.0 。瀏覽器的支持 “后退按鈕”,這樣當(dāng)用戶點(diǎn)擊后退或前進(jìn) 按鈕打開相應(yīng)的選項(xiàng)卡。要求這個歷史工具是包括在你的頁面。
initialIndex	`0`	指定選項(xiàng),最初打開當(dāng)頁面加載。這將自動觸發(fā)一個 `點(diǎn)擊` 事件為選項(xiàng)卡指定在本財(cái)產(chǎn)。指定 `null` 或者一個負(fù)數(shù)這里不會觸發(fā) `點(diǎn)擊` 事件在頁面加載導(dǎo)致所有選項(xiàng)卡最初將關(guān)閉。
rotate	false	自從1.1.0版。當(dāng)最后一個選項(xiàng)卡是開放和這個 `next()` 調(diào)用API調(diào)用,然后選項(xiàng)卡將從頭開始,當(dāng)?shù)谝粋€選項(xiàng)卡是開放和這個 `上一頁()` 調(diào)用調(diào)用選項(xiàng)卡將提前最后一個選項(xiàng)卡。這是證明在這里。
tabs	'a'	一個選擇器進(jìn)行元素,用作標(biāo)簽在根元素。如果沒有發(fā)現(xiàn)然后的直接子根元素用于為選項(xiàng)卡。

事件

事件	觸發(fā)時間
onBeforeClick	點(diǎn)擊一個標(biāo)簽之前。第二個參數(shù)是指數(shù) 被單擊的選項(xiàng)卡。
onClick	點(diǎn)擊后一個選項(xiàng)卡。第二個參數(shù)是指數(shù) 點(diǎn)擊的選項(xiàng)。

腳本 API
下面的示例說明如何訪問API:

復(fù)制代碼代碼如下:

 
var api = $("#tabui").data("tabs"); 
// advance to the next tab 
api.next(); 

以下列出的是所有API方法:

方法	返回值	描述/例子
click(index)	`API`	激活選項(xiàng)卡中指定的參數(shù)。參數(shù)可以是要么是 `整數(shù)` 數(shù)字指定標(biāo)簽指數(shù) (從0開始),或者當(dāng)選項(xiàng)卡 `一個` 標(biāo)記,它可以 `href` 屬性作為援引 `字符串` 。
destroy()	`API`	自從1.2.3 完全刪除現(xiàn)有的標(biāo)簽實(shí)例。
getConf()	Object	自從1.0.1。返回配置對象標(biāo)簽的實(shí)例。這個對象可以被修改, 變化是動態(tài)地反映在行為上的標(biāo)簽。
getCurrentPane()	`jQuery`	返回當(dāng)前面板作為jQuery對象。
getCurrentTab()	`jQuery`	返回當(dāng)前標(biāo)簽作為一個jQuery對象。
getIndex()	integer	返回當(dāng)前選項(xiàng)卡指數(shù)。
getPanes()	`jQuery`	返回jQuery對象窗格作為。
getTabs()	`jQuery`	返回標(biāo)簽作為一個jQuery對象。
next()	`API`	前進(jìn)到下一個選項(xiàng)卡。
prev()	`API`	進(jìn)步到以前的選項(xiàng)卡。