2009-07-05 6 views
0

私は豊富なtabPanelをいくつかタブに持っています。 jqueryを使用して各タブの変更を記録し、タブ内で変更が行われたときにタブの背景イメージを変更するようにします。RichFaces jqueryを使用して別のクラスをタブに追加する

それは次のようになります。

<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> 

私はセレクタを持っている理由はここから生成されたHTMLは次のようになりますので#tab_lblがあると言う:

<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> 

は今も指定しようとしましたこのセレクタのようなセレクタ= "#form:tab_lbl"しかし、私はこのtd要素にクラスを追加することはできません。これには何らかの理由がありますか? richfaces tabPanelを使用せずに新しいテーブルを作成した場合、同じセレクタでクラスを追加するこの方法を簡単に使用できますが、この例では機能しません。

アイデア?

編集:ファイアバグを使用してクラスを手作業で追加すると、結果がわかります。

答えて

2

rich:jQueryは、コンポーネントに一致させることができる場合は、適切なIDを見つけます。 Richfaces Developer Guideから:

あなたは、セレクタを定義すると、RichFacesの は、その内容を調べ、それが見つかった場合、コンポーネントIDを持つセレクタID で定義された置き換える にしようとします。あなたが使用することができ

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

(コロンをエスケープするために二重のバックスラッシュを入力してください)

:また、あなたは正確な IDを指定したいときのために与えられた例を見て

#tab1をセレクタとして使用し、rich:jQueryは正しいIDで置き換えます。しかし、これはタブを見つけて、タブラベルが必要です。

ラベルを見つけるより堅牢な方法(あなたのページを移動したりフォームにIDを与えてもまだ動作する場合は堅牢です)は、タブを見つけてそのタブの子ラベルです。可能なセレクタは次のようになります:

#tab1/../td.rich-tab-header 
関連する問題