如何在Primefaces tabView中设置活动选项卡？

问题描述

我有一个菜单栏，子菜单上有两个项目，两个都调用同一页面：

I have a menubar in which two items on a submenu, both calling the same page:

<p:menubar autoSubmenuDisplay="true">
   <p:submenu label="Perfil">
       <p:menuitem value="Editar" url="perfil.xhtml" />
       <p:menuitem value="Ver" url="perfil.xhtml" />
   </p:submenu>
</p:menubar>

在该页面中，我有一个带有两个标签的tabview：

In that page i have a tabview with two tabs:

<p:tabView dynamic="true">
    <p:tab id="ver" title="Ver perfil">
        <ui:include src="verPerfil.xhtml" />
    </p:tab>
    <p:tab id="editar" title="Editar perfil">
    <ui:include src="editarPerfil.xhtml" />
    </p:tab>
</p:tabView>

如何设置活动标签，以便每个菜单项激活相应的标签？

How can i set the active tab, so each menuitem activate the corresponding tab?

推荐答案

如果你想这样做。你不能使用 url 中的 p：menuitem 因为我们必须调用一种方法来改变tabindex 之前跳到 prefil.xhtml 页面。如果你使用 url ，我们跳过 prefil.xhtml 页面后会调用该方法。

If you want to do this.You can't use the url in the p:menuitem because we must call a method to changing the tabindex before skipping to the prefil.xhtml page. If you use the url, the method will be invoked after we skip to the prefil.xhtml page .

首先，您可以使用 p：menuitem 的操作字段，该方法返回您要跳过的地址：

First, you can use the action field of the p:menuitem, the method returns the address you want to skip to:

<p:menubar autoSubmenuDisplay="true">
    <p:submenu label="Perfil">
        <p:menuitem value="Editar" action="#{some.editar}" ajax="false"/>
        <p:menuitem value="Ver" action="#{some.ver}" ajax="false" />
    </p:submenu>
</p:menubar>

这两种方法可以像这样改变tabindex：

These two method do something to change the tabindex like this:

public String editar() {
    tabindex = 0;
    return "verPerfil";
}

public String ver() {
    tabindex = 1;
    return "verPerfil";
}

然后 p：tabView 具有名为 activeIndex 的属性。它是活动选项卡的索引，其默认值为 0 。所以你可以这样做：

Then the p:tabView has an attribute named activeIndex. It is the index of the active tab, its default value is 0. So you can do as follows:

<p:tabView dynamic="true" activeIndex="#{some.tabindex}" >
    <p:tab id="ver" title="Ver perfil">
        <ui:include src="verPerfil.xhtml" />
    </p:tab>
    <p:tab id="editar" title="Editar perfil">
        <ui:include src="editarPerfil.xhtml" />
    </p:tab>
</p:tabView>

然后每个menuitem都会激活相应的标签。

Then each menuitem will activate the corresponding tab.

这篇关于如何在Primefaces tabView中设置活动选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！