Question

我目前正在使用h:selectOneRadio来显示三个过滤选项。单击单选按钮时，将调用JavaScript函数以迭代下面的多个项目，以更改与所选过滤器选项对应的display CSS属性。这非常有效，并且没有往返服务器（没有POST或AJAX）。

这将让您了解当前的实施情况。

<script type="text/javascript">
function criteria_filterClick(radio)
{
    radio.value == 'selected' ? criteria_showOnlySelected() :
        radio.value == 'significant' ? criteria_showFirstOrSelected() :
        criteria_showAll();
}
</script>

<h:selectOneRadio id="filter" onclick="criteria_filterClick(this); return true;"
        value="#{searchBean.criterionFilter}">
    <f:selectItem itemValue="selected" itemLabel="Selected"/>
    <f:selectItem itemValue="significant" itemLabel="Basic"/>
    <f:selectItem itemValue="all" itemLabel="All"/>
</h:selectOneRadio>

然而，我觉得拥有标签会比单选按钮更好的UI隐喻。我正在看PrimeFaces＆＃39;其中包含p:tabMenu的{{1}}组件。但是，这两个组件的文档似乎没有任何对直接JavaScript的支持。

这是我已经开始的事情，但我不知道该去哪里：

p:menuitem

此时，没有任何功能（当您单击其中一个时，它甚至不会更改选项卡突出显示）。有没有办法将JavaScript添加到<p:tabMenu activeIndex="#{searchBean.criterionFilter == 'selected' ? 0 : (searchBean.criterionFilter == 'significant' ? 1 : 2)}"> <p:menuitem value="Selected"/> <p:menuitem value="Basic"/> <p:menuitem value="All"/> </p:tabMenu>？或者这不是正确的方法？

Answer 1

（将我的最终解决方案转移到单独的答案，以更贴切地遵守derM＆＃39的说明。我已经将OTM的答案标记为导致这些确切代码更改的原因）

为OTM添加更多逻辑，回答切换选项卡突出显示，以下似乎有效，但看起来有点难看：

function updateSettingTo(tabMenu, activeIdx)
{
    for (var idx = 0; idx &lt; tabMenu.items.length; idx++)
    {
        var item = $(tabMenu.items[idx]);
        if (idx == activeIdx)
            item.addClass("ui-state-active");
        else
            item.removeClass("ui-state-active");
    }
}

<p:tabMenu activeIndex="#{searchBean.criterionFilter == 'selected' ? 0 : (searchBean.criterionFilter == 'significant' ? 1 : 2)}" widgetVar="criteriaSelectionTabs">
    <p:menuitem value="Selected" onclick="criteria_showOnlySelected(); updateSettingTo(PF('criteriaSelectionTabs'), 0); return false;"/>
    <p:menuitem value="Basic" onclick="criteria_showFirstOrSelected(); updateSettingTo(PF('criteriaSelectionTabs'), 1); return false;"/>
    <p:menuitem value="All" onclick="criteria_showAll(); updateSettingTo(PF('criteriaSelectionTabs'), 2); return false;"/>
</p:tabMenu>

使用p：tabMenu和JavaScript

1 个答案: