談對jquery ui tabs 的理解_jquery-js教程-PHP中文網

jquery ui 點此下載，也可以到官網查看文件幫助。

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;
  }
});

登入後複製