Utilisation de jQuery RichFaces pour ajouter une autre classe à un onglet

Question

J'ai un riche: tabPanel avec plusieurs onglets. Je veux utiliser jquery pour enregistrer les changements sur chaque onglet de sorte que quand une modification est faite dans un onglet, je change l'image d'arrière-plan de l'onglet.

Il ressemble à ceci:

<h:form id="form"> 
    <rich:jQuery selector="#tab1_lbl" query="addClass('testClass')" timing="onload"/> 
     <rich:tabPanel switchType="client" id="tabContainer"> 
      <rich:tab id="tab1" label="tab1" title="tab1" > 
       tab1 
      </rich:tab> 

      <rich:tab id="tab2" label="tab2"> 
       tab2 
      </rich:tab> 
     </rich:tabPanel> 
</h:form> 

La raison pour laquelle je le sélecteur dire #tab_lbl est parce que le code HTML généré par cela ressemble à ceci:

<td id="form:tab1_lbl" class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-act rich-tab-active " title="tab1" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);"> 
tab1 
</td> 

Maintenant, j'ai aussi essayé de préciser la selector = "# form: tab_lbl", mais je n'arrive toujours pas à ajouter la classe à cet élément td. Y a-t-il une raison quelconque pour cela? Si je crée une nouvelle table sans utiliser tabfanel richfaces, je peux facilement utiliser cette façon d'ajouter des classes avec les mêmes sélecteurs, mais cela ne fonctionne tout simplement pas dans cet exemple.

Des idées? Edit: Je voudrais ajouter que si j'utilise firebug et que j'ajoute la classe à la main, j'obtiens le résultat que je recherche.

Answer 1

rich:jQuery trouver l'ID approprié pour vous s'il peut correspondre à un composant. De l'Richfaces Developer Guide:

Lorsque vous définissez un sélecteur, RichFaces examine son contenu et tente de remplacer le défini dans l'ID sélecteur avec un ID de composant si elle se trouve.

Regardez aussi l'exemple lorsque vous souhaitez spécifier l'exacte ID:

<rich:jQuery selector="#form\\:menu img" query="..." /> 

(notez la double barre oblique inverse pour échapper au côlon)

Vous pouvez utiliser #tab1 en tant que sélecteur et riche: jQuery le remplacerait par l'ID correct. Cependant, cela trouverait l'onglet et vous voulez l'étiquette de l'onglet. Alors peut-être un moyen plus robuste de trouver l'étiquette (robuste en ce sens que si vous déplacez votre page ou donnez au formulaire un identifiant alors ça fonctionnera encore) serait de trouver l'onglet, puis l'enfant de cet onglet qui est l'étiquette. Donc, un sélecteur possible serait:

#tab1/../td.rich-tab-header