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

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"使用,则可以跳过此部分.\\是for escape :,tabPanel是tabview的id.

ul li:是表示选项卡的无序列表项.

a [href ="#form:tabPanel:"+ tabId +"]': <a>其href属性等于tabId的标签.

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