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

復制代碼代碼如下:

 
/* 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()方法來實現(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");的效果
　　是不是很強大呢。
　　下面就以上配置參數(shù)說明描述如下：

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

事件

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

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

復制代碼代碼如下:

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

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

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