Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Event listeners for jQuery's UI tabs?

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;
    }
};
like image 314
Martin Bean Avatar asked Apr 05 '11 11:04

Martin Bean


3 Answers

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());
                    }
});
like image 184
Pjl Avatar answered Oct 16 '22 16:10

Pjl


Use tabsactivate event

$('#tabs').on('tabsactivate', function(event, ui) {
    var newIndex = ui.newTab.index();
    console.log('Switched to tab '+newIndex);
});
like image 41
Ali Gangji Avatar answered Oct 16 '22 14:10

Ali Gangji


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;
  }
});
like image 9
JS Mitrah Avatar answered Oct 16 '22 14:10

JS Mitrah