Question

使用Primefaces标签视图（<p:tabView>），如何从一个标签导航到另一个标签？

例如：

<p:tabView id="tabPanel">
  <p:tab id="tab1">
       <p>Tab 1</p>
       <a href="#">Go to tab2</a2>
  </p:tab>
   <p:tab id="tab2">
       <p>Tab 2</p>
  </p:tab>   
</p:tabView>

Answer 1

您可以使用PrimeFaces的客户端脚本api。在widgetVar中定义tabView属性。然后使用select(index)客户端api。

<p:tabView id="tabPanel" widgetVar="tabPanelWidget">
  <p:tab id="tab1">
       <p>Tab 1</p>
       <a href="#" onclick="changeTab(1);">Go to Tab2</a2>
  </p:tab>
   <p:tab id="tab2">
       <p>Tab 2</p>
  </p:tab>   
</p:tabView>

小心JS函数的参数。 tab的索引（基于零）将传递给Javascript。

这是客户端代码

function changeTab(index)
{
    tabPanelWidget.select(index);
}

带有动态内容的

tabView

此外，如果您有动态内容，则可以在用户单击选项卡时模拟客户端API。

我深入研究了组件的源代码。 tabview组件由div和无序列表项组成，其中包含要单击的<a>标记。然后我从页面中选择<a>个标签，然后点击jquery。

请参阅我的jquery代码：

function changeTab(tabId)
    {
       $('#formId\\:tabPanel ul li a[href="#form:tabPanel:"+tabId+"]').click();
}

以下是选择器的详细信息。

#formId \：tabPanel： formId是页面的ID。如果使用prependId="false"，则可以跳过此部分。 \\是:的转义符，tabPanel是tabview的ID。

ul li：是表示标签的无序列表项。

a [href =“＃form：tabPanel：”+ tabId +“]'： <a>标记，其href属性等于tabId。

此外，我检查PrimeFaces展示的源代码。您的代码可能会有一些差异。

Answer 2

您可以使用activeIndex的{{1}}属性。您必须将其存储在变量中，然后使用操作进行修改。

p:tabView

为myBean：

<p:tabView id="tabPanel" activeIndex="#{myBean.activeIndex}">
    <p:tab id="tab1">
        ...
        <p:commandLink action="#{myBean.goToTab(2)}">Go to Tab2</p>
    </p>
    <p:tab id="tab2">
        ...
    </p:tab>
</p:tabView>

Answer 3

您可以更改您的tabview的TAB：

    <p:tabView id="tabProyecto"  widgetVar="tabPanelWidget" cache="false">
....

在任何按钮中你都可以调用jquery函数＆＃34; changeTabs＆＃34;

    <script type="text/javascript">
            $(document).ready(function () {


            });

            var changeTabs= function (index) {
                 PF("tabPanelWidget").select(index);
            };
            ...
</script>

Answer 4

上面的@erecan回答中有拼写错误，动态标签的表单应为：

function changeTabDynamic(tabId)
{
   $('#formId\\:tabPanel ul li a[href="#formId:tabPanel:'+tabId+'"]').click();
}

提供答案而非评论明确格式

Answer 5

实际上你需要把：

function changeTab(index) {
    tabPanelWidget.selectTab(index);
}

而不是：

tabPanelWidget.select(index);

JSF / PrimeFaces：从一个选项卡导航到另一个选项卡

5 个答案: