Jquery UI tabs詳解

tabs 選項卡,發音:泰伯死,應該是tables(忒伯毆死)的縮寫吧,反正是選項卡就對了。
tabs 可以非常方便簡單的使用ajax,這個功能很強哦。下面將會詳細講解tabs的使用方法
原創作品,轉載請註明地址。AUTHOR:Jevoly
廢話少說,先看例子(例子用到了asp頁面,是由tabs自動調用ajax):
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<scritp>
$("#tabs").tabs({ajaxOptions:{beforeSend:function(){
$("<div id=load_tabs >loading...</div>").appendTo("#tabs"); //在ajax之前加一個loading層
},success:function(){
$("#load_tabs").remove(); //ajax成功後刪除loading層,我總覺得這樣做loading層不是最佳方法,如果哪位朋友有更好的方法,請告訴在下,謝謝了。
}
},selected:3,fx: { opacity: 'toggle'},idPrefix:'ui-tabs-54'//,load:function(event,ui){
});
</script>
<style type="text/css">
body{font:62.5% "宋體","Trebuchet MS",sans-serif;margin:50px;}
.demoHeaders{margin-top:2em;}
#container1{
width:400px;
}
</style>
</head>

<body>
<div id="container1">
<!--tabs-->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
   <li><a href="#tabs-1">壹</a></li>
   <li><a href="ajaxTabs.asp">貳</a></li> //第二個選項卡用到了ajax
   <li><a href="#tabs-3">叄</a></li>
</ul>
<div id="tabs-1">
   <p>豬頭</p>
</div>
<div id="tabs-3">
   <p>你好啊?豬頭.</p>
   <p>怎麼樣啊?哈哈。</p>
</div>
</div>
<!--end tabs-->  
</div>
</body>
</html>
ajaxTabs.asp頁面內容只有一句:
<%
response.Write("this is a ajax callcack ...")
%>

1 屬性
1.11 ajaxOptions
,當選項卡加載內容時,添加一個ajax選項。只有ajax時,添加的ajax選項才起作用。默認值爲null。上面的例子中,添加了beforeSend和success兩個選項。ajax還有一些選項請參考jquery ajax,這裏不做詳解。。。
1.12 初始化設置例:請注意,$('.selector')是tabs 的類名,在本例中.selector=#tabs,以後不再說明。
$('.selector').tabs({ ajaxOptions: { async: false } });//這裏是將異步改爲了同步。
1.13 初始化後的參數獲取和設置:請注意:getter爲獲取,發音:蓋特兒,setter爲設置,發音:塞特兒,以後不再說明。
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

1.21 cache 默認爲false,無緩存。這個選項用於ajax調用,簡單的說無緩存,就是每次發送請求都刷新;有緩存就是第一次請求刷新,以後就不刷新了,關閉頁面是另外一回事。ajaxOptions:{cache:false}應該和這個功能是一樣的吧。
1.22 初始化設置例:
$('.selector').tabs({ cache: true });
2.23 初始化後的參數獲取和設置:
//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);

1.31collapsible,意思是可摺疊的,默認選項是false,不可以摺疊。如果設置爲true,允許用戶將已經選中的選項卡內容摺疊起來。這樣說吧:點擊一次選項卡2,選項卡2內容顯示出來了,這時候再次點擊選項卡2,選項卡的內容區就收了起來,再次點擊選項卡2,選項卡的內容區則又展開了。明白否?知道你不明白,不明白就用最上面的例子試試吧。
1.32 初始化設置例:
$('.selector').tabs({ collapsible: true });
1.33 初始化後的參數獲取和設置:請參考1.23...

1.41 cookie 默認值爲null,需要cookie插件。保存最後一次選擇的選項卡到cookie 中。可使用的選項例:(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
1.42 初始化設置例:$('.selector').tabs({ cookie: { expires: 30 } });
1.43 初始化後的參數獲取和設置:請參考1.23...

1.51deselectable 默認爲false,作用似乎和collapsible一樣。

1.61 disabled 設置哪些選項卡不可用,是一個數組例[0,1,2],也就是第一個、第二個、第三個選項卡。默認爲[]。
1.62 初始化設置例:$('.selector').tabs({ disabled: [1, 2] });
1.63 初始化後的參數獲取和設置:請參考1.23...

1.71 event ,切換選項卡的事件,默認爲'click',點擊切換選項卡。
1.72 初始化設置例:$('.selector').tabs({ event: 'mouseover' }); //鼠標滑過切換選項卡
1.73 初始化後的參數獲取和設置:請參考1.23...

1.81 fx,切換選項卡時的動畫效果,默認爲:null,無動畫效果,
1.82 初始化設置:請參看最上面的例子。
1.83 初始化後的參數獲取和設置:請參考1.23...

1.91 idPrefix ,在使用ajax時,idPrefix選項可以爲其添加一個唯一的id,默認爲:'ui-tabs-' 。
1.92 初始化設置例:$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
1.93 初始化後的參數獲取和設置:請參考1.23...

1.101 selected,初始化時,哪個選項卡被選中,默認爲0,就是第一個選項卡被選中。
1.102 初始化設置例:$('.selector').tabs({ selected: 3 });
1.103 初始化後的參數獲取和設置:請參考1.23...

1.111 spinner,當遠程內容加載的時候,(ajax),spinner字符串的html內容將被顯示在選項卡的標題上。(我很奇怪,我自己試了,怎麼不起作用?)
1.112 初始化設置例:$('.selector').tabs({ spinner: 'Retrieving data...' });
1.113 初始化後的參數獲取和設置:請參考1.23...

1.121 panelTemplate ,

1.131 tabTemplate ,

2 事件
先給出一個事件綁定的例子,請注意:
$('#example').bind('tabsselect', function(event, ui) {
   ui.tab     // 被選中(點擊後)的選項卡元素
   ui.panel   //這個元素包含被選中(點擊後)的選項卡的內容
   ui.index   //返回一個被選中(或點擊後)選項卡的索引值(從0開始)
});

2.11 select 類型:tabsselect ,點擊選項卡時觸發該事件。
2.12 初始化時綁定事件:
$('.selector').tabs({
   select: function(event, ui) { ... }
});

2.13 在初始化後使用事件綁定綁定該事件:
$('.selector').bind('tabsselect', function(event, ui) {
...
});

2.21 load,類型:tabsload 一個遠程(ajax)選項卡的內容被加載完成後觸發該事件。
2.22 參考2.12
2.23 參考2.13
2.31 show,類型:tabsshow 當選項卡顯示後觸發該事件。
2.41 add,類型:tabsadd ,當一個選項卡被添加後觸發。
2.51 remove ,類型tabsremove ,當一個選項卡被刪除後觸發。
2.61 enable ,類型tabsenable ,當一個選項卡可用時觸發。
2.71 disable,類型tabsdisable,當一個選項卡不可用時觸發。

3 方法
3.11 destroy,哈哈,又到了我最喜歡的摧毀地球時間。例:.tabs( 'destroy' )
3.21 disable,整個選項卡不可用。
3.31 enable,整個選項卡可用。.tabs( 'enable' )
3.41 option,設置屬性。例:.tabs( 'option' , optionName , [value] )
3.51 add,remove,添加、刪除選項卡。例:.tabs( 'add' , url , label , [index] ) ,.tabs( 'remove' , index )
3.61 enable,設置某個選項卡標籤可用。例:.tabs( 'enable' , index )
3.71 disable,設置某個選項卡標籤不可用。例:.tabs( 'disable' , index )
3.81 select,選擇一個選項卡標籤。例:.tabs( 'select' , index ) ,index從0開始。
3.91 load,重載一個ajax選項卡的內容,這個一直載入遠程內容,即使cache設置爲true,第二個參數是要重載選項卡的索引值。例:.tabs( 'load' , index )
3.101 url,當一個ajax選項卡將要加載時,改變url。.tabs( 'url' , index , url )
3.111 abort,中止所有運行在tab標籤上的ajax請求或動畫。.tabs( 'abort' )
3.121 rotate, 自動翻滾選項卡標籤。.tabs('rotate',ms,[countinue]),第二個參數是毫秒,是兩個標籤自動翻滾所需要的時間,設爲0或null爲停止翻滾。第三個參數是設置當用戶選擇一個選項卡標籤後是否繼續翻滾,默認爲:false,不繼續。
真累,歇歇再說吧。。。
4 技巧
4.1 如何接收已選中選項卡標籤的索引值?
例:var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
4.2 如何用一個其它元素代替選項卡單擊事件來切換選項卡?
例:var $tabs = $('#example').tabs(); // 第一個標籤被選中
$('#my-text-link').click(function() { // 綁定單擊事件
    $tabs.tabs('select', 2); // 切換到第三個選項卡標籤
    return false;
});
4.3 如何立刻選擇剛添加的選項卡標籤?
例:var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});
4.4 如何在一個新窗口中打開選項卡標籤?
例:$('#example').tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, 'load.tabs');
        return false;
    }
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章