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ù)說明描述如下：
事件
腳本 API
下面的示例說明如何訪問API:
var api = $("#tabui").data("tabs");
// advance to the next tab
api.next();
以下列出的是所有API方法:
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' |
效果被用來當點擊一個選項卡。 這可以 戲劇性地改變這種行為的選項卡。 這是 可用的內(nèi)置的效果:
你也可以 讓自己的效果 。 |
| event | 'click' | 指定事件一個選項卡時打開。 默認情況下,這個 發(fā)生在當用戶單擊選項卡。 另一個有效值 是 “mouseover” 和 ‘dblclick' 。 |
| fadeInSpeed | 200 | 自從1.0.1。 唯一可用一起使用時 與“fade”效應。 該屬性定義了加快( 毫秒)打開的面板中顯示其內(nèi)容。 |
| fadeOutSpeed | 0 |
自從1.1.0版。 唯一可用一起使用時 與“fade”效應。 該屬性定義了加快( 毫秒)打開窗格中隱藏了它的內(nèi)容。 一個積極的 這里的價值將導致“crossfade”作用 演示了 這里 。 |
| history | false | 自從1.2.0 。 瀏覽器的支持 “后退按鈕”,這樣當用戶點擊后退或前進 按鈕打開相應的選項卡。 要求 這個 歷史工具 是 包括在你的頁面。 |
| initialIndex | 0 |
指定選項,最初打開當頁面 加載。 這將自動觸發(fā)一個 點擊 事件 為選項卡指定在本 財產(chǎn)。 指定 null 或者一個負數(shù)這里 不會觸發(fā) 點擊 事件在頁面加載 導致所有選項卡最初將關閉。 |
| rotate | false | 自從1.1.0版。 當最后一個選項卡是開放和 這個 next() 調(diào)用API調(diào)用,然后選項卡將 從頭開始,當?shù)谝粋€選項卡是開放和 這個 上一頁() 調(diào)用調(diào)用選項卡將提前 最后一個選項卡。 這是證明 在 這里 。 |
| tabs | 'a' | 一個選擇器進行元素,用作標簽在根 元素。 如果沒有發(fā)現(xiàn)然后的直接子根 元素用于為選項卡。 |
事件
| 事件 | 觸發(fā)時間 |
|---|---|
| onBeforeClick | 點擊一個標簽之前。 第二個參數(shù)是指數(shù) 被單擊的選項卡。 |
| onClick | 點擊后一個選項卡。 第二個參數(shù)是指數(shù) 點擊的選項。 |
下面的示例說明如何訪問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 |
進步到以前的選項卡。 |
相關文章
用jquery對表單進行客戶端驗證demo ，學習jquery的朋友可以參考下。2009-08-08
Jquery網(wǎng)頁內(nèi)滑動緩沖導航的實現(xiàn)代碼
這篇文章主要介紹了Jquery網(wǎng)頁內(nèi)滑動緩沖導航的實現(xiàn)代碼,實現(xiàn)滑動緩沖的方式實現(xiàn)頁內(nèi)導航，用戶體驗大大提升需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了jQuery輪播圖的實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
使用jquery模擬a標簽的click事件無法實現(xiàn)跳轉(zhuǎn)的解決
這篇文章主要給大家介紹了關于使用jquery模擬a標簽的click事件無法實現(xiàn)跳轉(zhuǎn)的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了JQuery中serialize()用法,實例分析了serialize()方法的功能、定義及相關使用技巧,需要的朋友可以參考下2015-02-02
做web開發(fā)的朋友都應該掌握前端優(yōu)化這個技巧，其中一個就是滾動延時加載。這個技巧應用在了很多地方，比如新浪微博網(wǎng)頁版。以下就為大家詳細介紹，需要的朋友可以參考下2013-07-07
這篇文章主要為大家詳細介紹了jQuery樹控件zTree使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery 將disabled的元素置為enabled的三種方法
在jquery中可以通過jqueryObj.attr("disabled","disabled")將頁面中某個元素置為不可編輯或觸發(fā)狀態(tài)，但是在jquery的API reference中并沒說明怎么將頁面置為disable的元素重新置為可觸發(fā)或可編輯的。2009-07-07
這篇文章主要為大家詳細介紹了jQuery結(jié)合Pdo編寫login登陸界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
EasyUI 結(jié)合JS導出Excel文件的實現(xiàn)方法
下面小編就為大家?guī)硪黄狤asyUI 結(jié)合JS導出Excel文件的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11