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

似乎旧版本的jquery ui不再支持select事件。

此代码适用于新版本：

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

Answer 2

使用tabsactivate事件

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

Answer 3

使用tabsshow事件，Index将从0开始。

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

Answer 4

是的：“事件”下的http://jqueryui.com/demos/tabs/

工作示例：http://jsfiddle.net/g7Q2L/（我使用嵌入值而不是索引来使标记与代码的耦合更少）

检查文档，当您启动标签时，可以.bind( "tabsselect", function(){}) 或向初始化对象添加select属性，就像在我的jsfiddle示例中一样。

Answer 5

Tabs插件有一个'show'事件，只要显示一个标签就会触发该事件。

检查文档中的事件＆gt; http://jqueryui.com/demos/tabs/

jQuery UI选项卡的事件监听器？

5 个答案: