jquery ui 點(diǎn)擊此處下載，也可以去官網(wǎng)查看文檔幫助。?

1 屬性

1.11 ajaxOptions,當(dāng)選項(xiàng)卡加載內(nèi)容時(shí)，添加一個(gè)ajax選項(xiàng)。只有ajax時(shí)，添加的ajax選項(xiàng)才起作用。默認(rèn)值為null。上面的例子中，添加了beforeSend和success兩個(gè)選項(xiàng)。ajax還有一些選項(xiàng)請(qǐng)參考jquery ajax，這里不做詳解。。。

1.12 初始化設(shè)置例：請(qǐng)注意，$('.selector')是tabs 的類(lèi)名，在本例中.selector=#tabs,以后不再說(shuō)明。

$('.selector').tabs({ ajaxOptions: { async: false } });//這里是將異步改為了同步。

1.13 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)注意：getter為獲取，發(fā)音：蓋特兒，setter為設(shè)置，發(fā)音：塞特兒，以后不再說(shuō)明。

//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

1.21 cache 默認(rèn)為false，無(wú)緩存。這個(gè)選項(xiàng)用于ajax調(diào)用，簡(jiǎn)單的說(shuō)無(wú)緩存，就是每次發(fā)送請(qǐng)求都刷新；有緩存就是第一次請(qǐng)求刷新，以后就不刷新了，關(guān)閉頁(yè)面是另外一回事。

ajaxOptions:{cache:false}應(yīng)該和這個(gè)功能是一樣的吧。

1.22 初始化設(shè)置例：

2.23 初始化后的參數(shù)獲取和設(shè)置：

//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);

1.31collapsible，意思是可折疊的，默認(rèn)選項(xiàng)是false，不可以折疊。如果設(shè)置為true，允許用戶(hù)將已經(jīng)選中的選項(xiàng)卡內(nèi)容折疊起來(lái)。這樣說(shuō)吧：點(diǎn)擊一次選項(xiàng)卡2，選項(xiàng)卡2內(nèi)容顯示出來(lái)了，這時(shí)候再次點(diǎn)擊選項(xiàng)卡2，選項(xiàng)卡的內(nèi)容區(qū)就收了起來(lái)，再次點(diǎn)擊選項(xiàng)卡2，選項(xiàng)卡的內(nèi)容區(qū)則又展開(kāi)了。明白否？知道你不明白，不明白就用最上面的例子試試吧。

1.32 初始化設(shè)置例：

1.33 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.41 cookie 默認(rèn)值為null，需要cookie插件。保存最后一次選擇的選項(xiàng)卡到cookie 中?？墒褂玫倪x項(xiàng)例：(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.

1.42 初始化設(shè)置例：$('.selector').tabs({ cookie: { expires: 30 } });

1.43 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.51deselectable 默認(rèn)為false，作用似乎和collapsible一樣。

1.61 disabled 設(shè)置哪些選項(xiàng)卡不可用，是一個(gè)數(shù)組例[0,1,2]，也就是第一個(gè)、第二個(gè)、第三個(gè)選項(xiàng)卡。默認(rèn)為[]。

1.62 初始化設(shè)置例：$('.selector').tabs({ disabled: [1, 2] });

1.63 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.71 event ，切換選項(xiàng)卡的事件，默認(rèn)為'click'，點(diǎn)擊切換選項(xiàng)卡。

1.72 初始化設(shè)置例：$('.selector').tabs({ event: 'mouseover' }); //鼠標(biāo)滑過(guò)切換選項(xiàng)卡

1.73 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.81 fx，切換選項(xiàng)卡時(shí)的動(dòng)畫(huà)效果，默認(rèn)為：null，無(wú)動(dòng)畫(huà)效果，

1.82 初始化設(shè)置：請(qǐng)參看最上面的例子。

1.83 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.91 idPrefix ，在使用ajax時(shí)，idPrefix選項(xiàng)可以為其添加一個(gè)唯一的id，默認(rèn)為：'ui-tabs-' 。

1.92 初始化設(shè)置例：$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });

1.93 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.101 selected，初始化時(shí)，哪個(gè)選項(xiàng)卡被選中，默認(rèn)為0，就是第一個(gè)選項(xiàng)卡被選中。

1.102 初始化設(shè)置例：$('.selector').tabs({ selected: 3 });

1.103 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.111 spinner，當(dāng)遠(yuǎn)程內(nèi)容加載的時(shí)候，（ajax），spinner字符串的html內(nèi)容將被顯示在選項(xiàng)卡的標(biāo)題上。（我很奇怪，我自己試了，怎么不起作用？）

1.112 初始化設(shè)置例：$('.selector').tabs({ spinner: 'Retrieving data...' });

1.113 初始化后的參數(shù)獲取和設(shè)置：請(qǐng)參考1.23...

1.121 panelTemplate ,

1.131 tabTemplate ,

2 事件

先給出一個(gè)事件綁定的例子，請(qǐng)注意：

$('#example').bind('tabsselect', function(event, ui) {
  ui.tab   // 被選中（點(diǎn)擊后）的選項(xiàng)卡元素
  ui.panel  //這個(gè)元素包含被選中（點(diǎn)擊后）的選項(xiàng)卡的內(nèi)容
  ui.index  //返回一個(gè)被選中（或點(diǎn)擊后）選項(xiàng)卡的索引值（從0開(kāi)始）
});

2.11 select 類(lèi)型：tabsselect ，點(diǎn)擊選項(xiàng)卡時(shí)觸發(fā)該事件。

2.12 初始化時(shí)綁定事件：

$('.selector').tabs({
  select: function(event, ui) { ... }
});

2.13 在初始化后使用事件綁定綁定該事件：

$('.selector').bind('tabsselect', function(event, ui) {
...
});

2.21 load，類(lèi)型：tabsload 一個(gè)遠(yuǎn)程（ajax）選項(xiàng)卡的內(nèi)容被加載完成后觸發(fā)該事件。

2.22 參考2.12

2.23 參考2.13

2.31 show，類(lèi)型：tabsshow 當(dāng)選項(xiàng)卡顯示后觸發(fā)該事件。

2.41 add，類(lèi)型：tabsadd ，當(dāng)一個(gè)選項(xiàng)卡被添加后觸發(fā)。

2.51 remove ，類(lèi)型tabsremove ，當(dāng)一個(gè)選項(xiàng)卡被刪除后觸發(fā)。

2.61 enable ，類(lèi)型tabsenable ，當(dāng)一個(gè)選項(xiàng)卡可用時(shí)觸發(fā)。

2.71 disable，類(lèi)型tabsdisable，當(dāng)一個(gè)選項(xiàng)卡不可用時(shí)觸發(fā)。

3 方法

3.11 destroy，哈哈，又到了我最喜歡的摧毀地球時(shí)間。例：.tabs( 'destroy' )

3.21 disable，整個(gè)選項(xiàng)卡不可用。

3.31 enable，整個(gè)選項(xiàng)卡可用。.tabs( 'enable' )

3.41 option，設(shè)置屬性。例：.tabs( 'option' , optionName , [value] )

3.51 add，remove，添加、刪除選項(xiàng)卡。例：.tabs( 'add' , url , label , [index] ) ，.tabs( 'remove' , index )

3.61 enable，設(shè)置某個(gè)選項(xiàng)卡標(biāo)簽可用。例：.tabs( 'enable' , index )

3.71 disable，設(shè)置某個(gè)選項(xiàng)卡標(biāo)簽不可用。例：.tabs( 'disable' , index )

3.81 select，選擇一個(gè)選項(xiàng)卡標(biāo)簽。例：.tabs( 'select' , index ) ，index從0開(kāi)始。

3.91 load，重載一個(gè)ajax選項(xiàng)卡的內(nèi)容，這個(gè)一直載入遠(yuǎn)程內(nèi)容，即使cache設(shè)置為true，第二個(gè)參數(shù)是要重載選項(xiàng)卡的索引值。

例：.tabs( 'load' , index )

3.101 url，當(dāng)一個(gè)ajax選項(xiàng)卡將要加載時(shí)，改變url。.tabs( 'url' , index , url )

3.111 abort，中止所有運(yùn)行在tab標(biāo)簽上的ajax請(qǐng)求或動(dòng)畫(huà)。.tabs( 'abort' )

3.121 rotate， 自動(dòng)翻滾選項(xiàng)卡標(biāo)簽。.tabs('rotate',ms,[countinue]),第二個(gè)參數(shù)是毫秒，是兩個(gè)標(biāo)簽自動(dòng)翻滾所需要的時(shí)間，設(shè)為0或null為停止翻滾。第三個(gè)參數(shù)是設(shè)置當(dāng)用戶(hù)選擇一個(gè)

選項(xiàng)卡標(biāo)簽后是否繼續(xù)翻滾，默認(rèn)為：false，不繼續(xù)。

真累，歇歇再說(shuō)吧。。。

4 技巧

4.1 如何接收已選中選項(xiàng)卡標(biāo)簽的索引值？

例：

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

4.2 如何用一個(gè)其它元素代替選項(xiàng)卡單擊事件來(lái)切換選項(xiàng)卡？

例：

var $tabs = $('#example').tabs(); // 第一個(gè)標(biāo)簽被選中
$('#my-text-link').click(function() { // 綁定單擊事件
  $tabs.tabs('select', 2); // 切換到第三個(gè)選項(xiàng)卡標(biāo)簽
  return false;
});

4.3 如何立刻選擇剛添加的選項(xiàng)卡標(biāo)簽？

例：

var $tabs = $('#example').tabs({
  add: function(event, ui) {
    $tabs.tabs('select', '#' + ui.panel.id);
  }
});

4.4 如何在一個(gè)新窗口中打開(kāi)選項(xiàng)卡標(biāo)簽？

例：$('#example').tabs({

  select: function(event, ui) {
    location.href = $.data(ui.tab, 'load.tabs');
    return false;
  }
});