使用 p:tabMenu 和 JavaScript

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 的 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？或者这不是正确的方法吗？

Answer 1

是的，您可以通过在每个 p:menuitem 元素上使用 onclick 属性而不是在 p:tabMenu.[=17= 上调用 JavaScript 函数来实现您想要的效果]

例如，对于 "Selected" p:menuitem 你可以

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

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

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

Answer 2

(将我的最终解决方案移到一个单独的答案中，以更符合 derM 的注释。我将 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

Use p:tabMenu with JavaScript

javascript

jsf

primefaces

tabmenu