¿Escuchas de eventos para las pestañas UI de jQuery?

Question

¿Hay detectores de eventos disponibles para el widget de pestañas de jQuery UI?

Estoy queriendo cambiar el color de fondo en una página web dependiendo de qué índice de pestañas esté actualmente activo. Así que algo como esto (pseudocódigo):

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

Gracias de antemano.

Answer 1

caso Uso tabsshow, índice será empezar desde 0.

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

Answer 2

el plugin aquí tienen un evento 'show' que se dispara cada vez que se muestra una ficha.

verificación de los eventos en la documentación>http://jqueryui.com/demos/tabs/

Answer 3

Sí: http://jqueryui.com/demos/tabs/ bajo "Eventos"

Ejemplo de trabajo: http://jsfiddle.net/g7Q2L/ (he usado los valores incrustado y no el índice que el margen de beneficio menor junto con el código)

Compruebe la documentación, puede .bind("tabsselect", function(){}) o cuando inicia pestañas agregar una propiedad select al objeto initiliasing como en mi ejemplo jsFiddle.

Answer 4

Uso tabsactivate caso

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

Answer 5

parece de la edad de la versión de jQuery UI no son compatibles seleccione caso más.

Este código funcionará con las nuevas versiones:

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