使用 RichFaces jquery 将另一个类添加到选项卡

发布于 2024-07-26 08:34:07 字数 1095 浏览 8 评论 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 并手动添加类，我会得到我正在寻找的结果。

原文

I have a rich:tabPanel with several tabs in it. I want to use jquery to record changes on each tab so that when a change is made within a tab I change the background image of the tab.

It looks like this:

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

The reason I have the selector say #tab_lbl is because the html generated from this looks like this:

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

Now I also tried to specify the selector like this selector="#form:tab_lbl" , but still I can never get to add the class to this td element. Is there any reason for this? If I make a new table without using richfaces tabPanel I can easily use this way of adding classes with the same selectors, but it just dont work in this example.

Any ideas?

Edit: I would like to add that if I use firebug and add the class by hand I get the result Im looking for.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滥情空心 2024-08-02 08:34:07

如果 rich:jQuery 能够将其与组件匹配，它将为您找到正确的 ID。来自 Richfaces 开发人员指南：

当您定义选择器时，RichFaces
检查其内容并尝试
替换选择器中定义的id
如果找到的话，带有组件 ID。

另请参阅当您想要指定精确 ID 时给出的示例：（

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

注意双反斜杠以转义冒号）

您可以使用#tab1 作为选择器rich:jQuery 会将其替换为正确的 ID。但是，这会找到选项卡并且您需要选项卡标签。

因此，查找标签的更可靠的方法可能是找到选项卡，然后找到该选项卡的子选项卡（即标签）。所以一个可能的选择器是：

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

rich:jQuery will find the proper ID for you if it can match it to a component. From the Richfaces Developer Guide:

When you define a selector, RichFaces
examines its content and tries to
replace the defined in the selector id
with a component id if it's found.

Also look at the example given for when you want to specify the exact ID:

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

(note the double back-slash to escape the colon)

You could use #tab1 as the selector and rich:jQuery would replace it with the correct ID. However this would find the tab and you want the tab label.

So possibly a more robust way to find the label (robust in that if you move your page around or give the form an id then it will still work) would be to find the tab and then the child of that tab that is the label. So a possible selector would be: