Est-ce la meilleure façon de créer un onglet "Tous" à l'aide des onglets jQuery?

Question

J'ai créé une interface à l'aide des onglets de l'interface utilisateur jQuery, mais l'une de mes exigences était d'avoir une option «Tous» qui afficherait le contenu de toutes les pages du groupe d'onglets en même temps.

Mes onglets sont générés dynamiquement à partir de PHP et je donne chaque bouton onglet un identifiant afin que le résultat ressemble suit:

<li ><a id='tabProjectBrief' href="#section1">Project Brief</a></li> 
<li ><a id='tabScorecard' href="#extra1">Scorecard</a></li> 
<li ><a id='tabContributions' href="#section2">Contributions</a></li> 
<li ><a id='tabOther' href="#section6">Other</a></li> 
<li ><a id='tabAll' href="#all">All</a></li> 

Puis dans mon JavaScript je donne les résultats suivants:

$(document).ready(function() { 
    $('#tabAll').click(function(){ 

    setTimeout("$('div.tabSection').removeClass('ui-tabs-hide')", 50); 
    }); 
}); 

J'utilise setTimeout() car lorsqu'un onglet est sélectionné, jQuery UI définit la classe ui-tab-hide sur l'onglet précédemment sélectionné qui, d'après ce que je sais, se produit après l'événement click sur le nouvel onglet. De cette façon, l'onglet qui vient de recevoir la classe ui-tabs-hide sera également supprimé.

Cela semble fonctionner très bien, mais cela me semble un peu un hack, alors y a-t-il une meilleure façon de le faire? Merci.

Answer 1

Votre solution me semble bien. $("div.tab-section").show(); est plus propre mais garde les noms de classe intacts, ce que vous ne voulez pas dans le cas où l'utilisateur sélectionne un autre onglet après avoir cliqué sur l'onglet "Tous".