Event listeners for jQuery's UI tabs?

Question

Are there event listeners available for jQuery UI's tabs widget?

I'm wanting to change the background colour on a web page depending on what tab index is currently active. So something like this (pseudo code):

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

score 17 · Answer 1 · answered Mar 15 '13 at 14:35

it seems the old's version's of jquery ui don't support select event anymore.

This code will work with new versions:

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

score 12 · Answer 2 · answered Mar 11 '13 at 19:12

12

Use tabsactivate event

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

answered Mar 11 '13 at 19:12

Ali Gangji

1,463
13
22

score 9 · Accepted Answer · answered Apr 05 '11 at 11:53

9

Use tabsshow event, Index will be start from 0.

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

answered Apr 05 '11 at 11:53

JS Mitrah

686
5
12

score 1 · Answer 4 · answered Apr 05 '11 at 12:02

Yep: http://jqueryui.com/demos/tabs/ under "Events"

Working example: http://jsfiddle.net/g7Q2L/ (I used embedded values and not the index to make the markup less coupled with the code)

Check the docs, you can .bind( "tabsselect", function(){}) or when you initiate tabs add a select property to the initiliasing object like in my jsfiddle example.

score 0 · Answer 5 · answered Apr 05 '11 at 11:55

0

the Tabs plugin have a 'show' event which is fired whenever a tab is shown.

check the events in documentation > http://jqueryui.com/demos/tabs/

answered Apr 05 '11 at 11:55

neebz

11,465
7
47
64

Event listeners for jQuery's UI tabs?

5 Answers5