0

複数のタブを含む rich:tabPanel があります。タブ内で変更が行われたときにタブの背景画像を変更できるように、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>

セレクターに #tab_lbl と言う理由は、これから生成される html が次のようになるためです。

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

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

何か案は？

編集：firebugを使用して手動でクラスを追加すると、探している結果が得られることを追加したいと思います。

4

1 に答える 1

2

rich:jQueryコンポーネントと一致する場合は、適切なIDが見つかります。Richfaces開発者ガイドから：

セレクターを定義すると、RichFacesはそのコンテンツを調べ、セレクターIDで定義されているものが見つかった場合は、コンポーネントIDに置き換えようとします。

また、正確なIDを指定する場合の例も参照してください。

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

（コロンをエスケープするための二重の円記号に注意してください）

セレクターとして使用でき#tab1、rich：jQueryはそれを正しいIDに置き換えます。ただし、これでタブが見つかり、タブラベルが必要になります。

したがって、ラベルを見つけるためのより堅牢な方法（ページを移動したり、フォームにIDを指定したりしても機能するという点で堅牢です）は、タブを見つけてから、そのタブの子であるラベルを見つけることです。したがって、可能なセレクターは次のようになります。

#tab1/../td.rich-tab-header
于 2009-07-06T08:40:35.993 に答える