jQuery Tools tab使用介紹
更新時(shí)間：2012年07月14日 11:33:06 作者：
jQuery Tools tab使用介紹，需要的朋友可以參考下
先給個(gè)官方例子。可以先弄出來(lái)看看效果
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;
}
該功能是通過(guò)jqueryObject.tabs()方法來(lái)實(shí)現(xiàn)的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class，我對(duì)div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
這兩個(gè)同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
是不是很強(qiáng)大呢。
下面就以上配置參數(shù)說(shuō)明描述如下：
事件
腳本 API
下面的示例說(shuō)明如何訪問(wèn)API:
var api = $("#tabui").data("tabs");
// advance to the next tab
api.next();
以下列出的是所有API方法:
html
復(fù)制代碼 代碼如下:
<!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;
}
該功能是通過(guò)jqueryObject.tabs()方法來(lái)實(shí)現(xiàn)的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class，我對(duì)div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
這兩個(gè)同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
是不是很強(qiáng)大呢。
下面就以上配置參數(shù)說(shuō)明描述如下：
| 屬性名稱 | 默認(rèn) 值 | 描述 |
|---|---|---|
| current | 'current' | CSS類名當(dāng)前活躍的選項(xiàng)卡。 |
| effect | 'default' |
效果被用來(lái)當(dāng)點(diǎn)擊一個(gè)選項(xiàng)卡。 這可以 戲劇性地改變這種行為的選項(xiàng)卡。 這是 可用的內(nèi)置的效果:
你也可以 讓自己的效果 。 |
| event | 'click' | 指定事件一個(gè)選項(xiàng)卡時(shí)打開(kāi)。 默認(rèn)情況下,這個(gè) 發(fā)生在當(dāng)用戶單擊選項(xiàng)卡。 另一個(gè)有效值 是 “mouseover” 和 ‘dblclick' 。 |
| fadeInSpeed | 200 | 自從1.0.1。 唯一可用一起使用時(shí) 與“fade”效應(yīng)。 該屬性定義了加快( 毫秒)打開(kāi)的面板中顯示其內(nèi)容。 |
| fadeOutSpeed | 0 |
自從1.1.0版。 唯一可用一起使用時(shí) 與“fade”效應(yīng)。 該屬性定義了加快( 毫秒)打開(kāi)窗格中隱藏了它的內(nèi)容。 一個(gè)積極的 這里的價(jià)值將導(dǎo)致“crossfade”作用 演示了 這里 。 |
| history | false | 自從1.2.0 。 瀏覽器的支持 “后退按鈕”,這樣當(dāng)用戶點(diǎn)擊后退或前進(jìn) 按鈕打開(kāi)相應(yīng)的選項(xiàng)卡。 要求 這個(gè) 歷史工具 是 包括在你的頁(yè)面。 |
| initialIndex | 0 |
指定選項(xiàng),最初打開(kāi)當(dāng)頁(yè)面 加載。 這將自動(dòng)觸發(fā)一個(gè) 點(diǎn)擊 事件 為選項(xiàng)卡指定在本 財(cái)產(chǎn)。 指定 null 或者一個(gè)負(fù)數(shù)這里 不會(huì)觸發(fā) 點(diǎn)擊 事件在頁(yè)面加載 導(dǎo)致所有選項(xiàng)卡最初將關(guān)閉。 |
| rotate | false | 自從1.1.0版。 當(dāng)最后一個(gè)選項(xiàng)卡是開(kāi)放和 這個(gè) next() 調(diào)用API調(diào)用,然后選項(xiàng)卡將 從頭開(kāi)始,當(dāng)?shù)谝粋€(gè)選項(xiàng)卡是開(kāi)放和 這個(gè) 上一頁(yè)() 調(diào)用調(diào)用選項(xiàng)卡將提前 最后一個(gè)選項(xiàng)卡。 這是證明 在 這里 。 |
| tabs | 'a' | 一個(gè)選擇器進(jìn)行元素,用作標(biāo)簽在根 元素。 如果沒(méi)有發(fā)現(xiàn)然后的直接子根 元素用于為選項(xiàng)卡。 |
事件
| 事件 | 觸發(fā)時(shí)間 |
|---|---|
| onBeforeClick | 點(diǎn)擊一個(gè)標(biāo)簽之前。 第二個(gè)參數(shù)是指數(shù) 被單擊的選項(xiàng)卡。 |
| onClick | 點(diǎn)擊后一個(gè)選項(xiàng)卡。 第二個(gè)參數(shù)是指數(shù) 點(diǎn)擊的選項(xiàng)。 |
下面的示例說(shuō)明如何訪問(wèn)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開(kāi)始),或者當(dāng)選項(xiàng)卡 一個(gè) 標(biāo)記,它 可以 href 屬性作為 援引 字符串 。 |
| destroy() | API |
自從1.2.3 完全刪除現(xiàn)有的標(biāo)簽 實(shí)例。 |
| getConf() | Object | 自從1.0.1。 返回配置對(duì)象 標(biāo)簽的實(shí)例。 這個(gè)對(duì)象可以被修改, 變化是動(dòng)態(tài)地反映在行為上的標(biāo)簽。 |
| getCurrentPane() | jQuery |
返回當(dāng)前面板作為jQuery對(duì)象。 |
| getCurrentTab() | jQuery |
返回當(dāng)前標(biāo)簽作為一個(gè)jQuery對(duì)象。 |
| getIndex() | integer | 返回當(dāng)前選項(xiàng)卡指數(shù)。 |
| getPanes() | jQuery |
返回jQuery對(duì)象窗格作為。 |
| getTabs() | jQuery |
返回標(biāo)簽作為一個(gè)jQuery對(duì)象。 |
| next() | API |
前進(jìn)到下一個(gè)選項(xiàng)卡。 |
| prev() | API |
進(jìn)步到以前的選項(xiàng)卡。 |
相關(guān)文章
jQuery/$ is not defined報(bào)錯(cuò)的幾種解決方法
jQuery最常見(jiàn)的錯(cuò)誤之一是$ is not defined錯(cuò)誤,本文主要介紹了jQuery/$ is not defined報(bào)錯(cuò)的幾種解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計(jì)時(shí)功能，非常不錯(cuò)，代碼簡(jiǎn)單易懂，需要的朋友參考下吧2016-11-11
快速學(xué)習(xí)jQuery插件 Cookie插件使用方法
快速學(xué)習(xí)jQuery插件中的Cookie插件使用方法，一個(gè)輕量級(jí)的cookie插件，可以讀取、寫(xiě)入、刪除 cookie，感興趣的小伙伴們可以參考一下2015-12-12
jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果，實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery實(shí)現(xiàn)的超出屏幕時(shí)把固定層變?yōu)槎ㄎ粚拥拇a
相信很多人都上過(guò)taobao吧，在taobao的產(chǎn)品列表頁(yè)有一個(gè)浮動(dòng)的用來(lái)排序的浮動(dòng)層，當(dāng)你拖動(dòng)滾動(dòng)條而導(dǎo)致那個(gè)排序欄看不到的時(shí)候它會(huì)自動(dòng)變?yōu)楦?dòng)層，一直固定在那里。2010-02-02
jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)圖片功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)圖片功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
jquery把int類型轉(zhuǎn)換成字符串類型的方法
下面小編就為大家?guī)?lái)一篇jquery把int類型轉(zhuǎn)換成字符串類型的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了jQuery中:first選擇器用法,實(shí)例分析了:first選擇器的功能、定義及匹配元素時(shí)的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery帶時(shí)間的日期控件，選擇的時(shí)間可精確到分鐘,很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片預(yù)覽大圖效果
我們可以借助jQuery來(lái)實(shí)現(xiàn)一些很酷炫的效果，本篇為大家介紹下通過(guò)jQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過(guò)了圖片數(shù)，圖片會(huì)放大進(jìn)行預(yù)覽大圖,需要的朋友可以參考下2014-04-04