JSF/PrimeFaces : Navigate from one tab to another

Question

使用 Primefaces 选项卡 View ( <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 展示的源代码。您的代码可能存在一些差异。