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 中?？墒褂玫倪x項例：(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;
??? }
});

轉載于:https://www.cnblogs.com/lijia7436/archive/2010/03/31/1701194.html

總結

以上是生活随笔為你收集整理的jquery ui tabs详解(中文) 【转载】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。