Onglets de l'interface utilisateur jQuery, sélectionner/désélectionner (réduire) les événements

Question

J'utilise le plugin jQuery UI 1.8.5 tabs, avec repliable: true configuration. Je dois appeler une fonction après la réduction d'une tabulation pour ajouter une classe CSS. Est-ce que quelqu'un sait comment?

Answer 1

Vous pouvez vérifier si la classe ui-tabs-selected existe en cliquant dessus. En supposant que vous utilisez le balisage standard:

// in your click event 
var selected_exists = $('#yourTabBox') 
    .children('ul.ui-tabs-nav') 
    .children('li.ui-tabs-selected') 
    .length; 

if (selected_exists) { 
    // Nothing is collapsed 
} else { 
    // collapsed 
} 

C'est parfait pour l'événement select.

Answer 2

Qu'en est-il le show event ne fonctionnera pas pour cela? Parce que vous ne savez pas lequel était caché?

Peut-être même le select event pourrait être ce que vous voulez.

en utilisant l'événement 'tabsselect':

$(".selector").tabs({ 
    collapsible: true, 
    select: function(event, ui) 
    { 
     var prevSelectedIndex = $(".selector").tabs('option', 'selected'); 
     var nextSelectedIndex = ui.index; 

     if(prevSelectedIndex === -1) 
     { 
      // It was previously collapsed and the user is now opening 
      // tab at index: nextSelectedIndex 
     } 
     else if(prevSelectedIndex === nextSelectedIndex) 
     { 
       // The user has clicked on the currently opened 
       // tab and it is collapsing 
     } 
    } 
});