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;
}
};
Thanks in advance.
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());
}
});
Use tabsactivate event
$('#tabs').on('tabsactivate', function(event, ui) {
var newIndex = ui.newTab.index();
console.log('Switched to tab '+newIndex);
});
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;
}
});
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.
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.