Слушатели событий для вкладок пользовательского интерфейса jQuery?

Question

Доступны ли прослушиватели событий для виджета вкладок пользовательского интерфейса jQuery?

Я хочу изменить цвет фона на веб-странице в зависимости от того, какой индекс вкладок активен в данный момент.Так что-то вроде этого (псевдокод):

$('.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

Использовать событие табулирования

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

Answer 3

Использовать событие tabsshow, индекс будет начинаться с 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', которое запускается всякий раз, когда отображается вкладка.

проверить события в документации> http://jqueryui.com/demos/tabs/