JSF/PrimeFaces:从一个选项卡导航到另一个选项卡 [英] JSF / PrimeFaces: Navigate from one tab to another

问题描述

使用Primefaces选项卡视图(<p:tabView>)，如何从一个选项卡导航到另一个选项卡?

Using Primefaces tab view (<p:tabView>), how to navigate from one tab to another tab?

例如:

<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>

推荐答案

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

You can use client side scripting api of PrimeFaces. Define a widgetVar attribute in tabView. Then use select(index) client side 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.

Be carefull about the parameter to JS function. the index of tab , which is zero based, is passed to Javascript.

这是客户端代码

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

带有动态内容的选项卡视图

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

Furthermore, if you have dynamic content you can simulate the client side api as user click the tab.

我深入了解该组件的源代码.一个tabview组件由div和无序列表项组成，这些项包括要单击的<a>标记.然后，我从页面中选择<a>标签，并用jquery单击.

I go deep into source code of the component. A tabview component consist of a div and unordered list items which include a <a> tags to click. Then i select that <a> tags from the page and clicked with jquery.

查看我的jquery代码:

See my jquery code:

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

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

Here is the details of selectors.

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

#formId\:tabPanel : formId is the id of the page. If prependId="false" is used this part can be skipped. \\ is escape for : and tabPanel is the id of the tabview.

ul li:是代表标签的无序列表项.

ul li : is unordered list items which represents tabs.

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

a[href="#form:tabPanel:"+tabId+"]' : <a> tag whose href attribure is equals to tabId.

此外，我检查了PrimeFaces展示柜中的源代码.您的代码可能有所不同.

Furthermore, i inspect the source code from PrimeFaces showcase. It may be have some differences in your codes.

这篇关于JSF/PrimeFaces:从一个选项卡导航到另一个选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！