jQuery UI標籤的事件監聽器？

Question

是否有事件監聽器可用於jQuery UI的標籤小部件？

我想要改變網頁的背景顏色取決於當前活動的標籤索引。所以像這樣的東西（僞代碼）：

$('.tabs').addEventListener(index, changeBackgroundImage); 

function changeBackgroundImage(index) { 
    switch (index) { 
     case 1: 
      $('body').css('background-image', '/images/backgrounds/1.jpg'); 
     break; 
     case 2: 
      $('body').css('background-image', '/images/backgrounds/2.jpg'); 
     break; 
     case 3: 
      $('body').css('background-image', '/images/backgrounds/3.jpg'); 
     break; 
     default: 
      $('body').css('background-image', '/images/backgrounds/default.jpg'); 
     break; 
    } 
}; 

在此先感謝。

Answer 1

使用tabsshow事件，指數將開始從0

$('#tabs').bind('tabsshow', function(event, ui) { 
    switch (ui.index){ 
    case 0: 
     $('body').css('background-image', '/images/backgrounds/1.jpg'); 
     break; 
    } 
}); 

Answer 2

的標籤插件具有每當所示的標籤，其發射的「秀」事件。

檢查在文件中的事件>http://jqueryui.com/demos/tabs/

Answer 3

沒錯：http://jqueryui.com/demos/tabs/下「事件」

工作實施例：http://jsfiddle.net/g7Q2L/（I使用的包埋值，而不是索引可以使更少加上代碼標記）

檢查文檔時，您可以.bind("tabsselect", function(){})或當您啓動選項卡時，將select屬性添加到啓動對象中，就像在我的jsfiddle示例中一樣。

Answer 4

使用tabsactivate事件

$('#tabs').on('tabsactivate', function(event, ui) { 
    var newIndex = ui.newTab.index(); 
    console.log('Switched to tab '+newIndex); 
}); 

Answer 5

似乎老的版本的jQuery用戶界面不支持選擇的事件了。

該代碼可以使用新版本的工作：

$('.selector').tabs({ 
        activate: function(event ,ui){ 
         //console.log(event); 
         console.log(ui.newTab.index()); 
        } 
});