1

我目前正在使用一个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 的p:tabMenu组件，其中包含p:menuitems。但是，这两个组件的文档似乎不支持直接的 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>

此时，没有任何功能（当您单击其中一个时，它甚至不会更改选项卡突出显示）。有没有办法将 JavaScript 添加到p:tabMenu? 或者这不是正确的方法吗？

4

2 回答 2

2

是的，您可以通过onclick在每个元素上使用属性p:menuitem而不是在p:tabMenu.

例如，对于“已选择” p:menuitem，您可以拥有

<p:menuitem value=Selected" onclick="criteria_showOnlySelected(); return false;"/>

这return false;是为了防止默认操作提交行为。同样，对于其他两个p:menuitems，您需要调用其他特定的 JavaScript 函数。

[来自 OP 的注意：这个答案给出了关键的 JavaScript 调用逻辑，但需要做一些额外的工作来更改选定的选项卡。有关完整的最终解决方案，请参阅上面编辑过的问题。]

于 2017-05-11T16:38:34.483 回答
0

（将我的最终解决方案移至单独的答案以更符合 derM 的说明。我已将 OTM 的答案标记为导致这些确切代码更改的原因。）

为 OTM's answer to switch tab highlight 添加更多逻辑，以下似乎可行，但看起来有点难看：

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>
于 2017-05-12T14:12:41.957 回答