Используйте 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>

Тем не менее, я чувствую, что вкладки были бы лучшей метафорой пользовательского интерфейса, чем переключатели. Я смотрю на PrimeFaces p:tabMenu компонент с 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>

На данный момент нет никакой функциональности (она даже не меняет подсветку вкладок при нажатии на одну из них). Есть ли способ добавить JavaScript в p:tabMenu ? Или это не правильный путь?

Answer 1

Да, вы можете достичь желаемого, вызвав функцию JavaScript с помощью onclick атрибут на каждом p:menuitem элемент, а не на p:tabMenu,

Например, для "Избранных" p:menuitem ты мог бы иметь

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

return false; чтобы предотвратить поведение отправки действия по умолчанию. Аналогично для двух других p:menuitems вам нужно вызвать другие специфические функции JavaScript.

[ПРИМЕЧАНИЕ от ОП: Этот ответ дает важную логику вызова JavaScript, но для изменения выбранной вкладки потребовалась небольшая дополнительная работа. См. Отредактированный вопрос выше для полного окончательного решения.]

Answer 2

(Переместив мое окончательное решение к отдельному ответу, чтобы более точно соответствовать примечанию derM. Я оставил помеченным ответ OTM, поскольку именно это привело к точным изменениям кода.)

Если добавить дополнительную логику к ответу OTM на выделение вкладки переключателя, то, кажется, работает следующее, но выглядит немного некрасиво:

function updateSettingTo(tabMenu, activeIdx)
{
    for (var idx = 0; idx < 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>