p:tabView：直接链接到选项卡

Posted 2023-03-10

【中文标题】p:tabView：直接链接到选项卡

【英文标题】：p:tabView: direct link to tab

【发布时间】：2014-03-07 17:34:41

【问题描述】：

我想要一个可以打开 p:tabView 的特定选项卡的链接。我试过这个链接，但是

它不起作用（第一个选项卡打开）：/jsf/.....#tabView:tabA

这是我的 TabView ：

  <p:tabView id="tabView">        
            <p:tab id="tabb" title="B">
            </p:tab>    
        <p:tab id="tabA" title="A">
        </p:tab>            
 </p:tabView>

任何帮助将不胜感激！

【问题讨论】：

可能重复，以下显示如何解决非动态非缓存 p:tabview 以及动态和非缓存 p:tabView：***.com/questions/20350475/…

【参考方案1】：

您可以按照 PrimeFaces 文档中的说明使用 javascript 调用小部件。 为 tabView 指定一个小部件名称并使用 .select(tabIndex) 更改选项卡

如果您从另一个页面重定向，您可以传递请求参数（例如../url?tabIndex=0）来决定将激活哪个选项卡，从 url 参数获取变量并使用再次激活该选项卡客户端 api（javascript 调用）。

<p:tabView id="tabView" widgetVar="myTabExample">        
          </p:tab>
        <p:tab id="tabb" title="B">
         </p:tab>   
        <p:tab id="tabA" title="A">
        </p:tab>            
 </p:tabView>

<script>
   myTabExample.select(0);
</script>

我还添加了一个带有 get 参数的示例

 <p:tabView id="tabView" widgetVar="myTabExample">        
              </p:tab>
            <p:tab id="tabb" title="B">
             </p:tab>   
            <p:tab id="tabA" title="A">
            </p:tab>            
     </p:tabView>

    <script>
    //function to parse get parameters from url
    //taken from http://***.com/questions/831030/how-to-get-get-request-parameters-in-javascript
    function get(name)
        if (name=(new RegExp('[?&]'+encodeURIComponent(name)+'= ([^&]*)')).exec(location.search))
        return decodeURIComponent(name[1]);
     

    myTabExample.select(get("tabIndex"));
</script>

【讨论】：

感谢您的回答，是的，我想从另一个页面重定向，但是这个参数“tabIndex=0”用于 JSP，而不是 JSF。我试过这个“/url#tabView:tabA”，但要么它不工作

嗨，我说的是自定义参数。当然，您可以传递您的自定义参数并从 url 解析它。在 JSF 中不能使用 url 参数是没有限制的。 （我用一个例子编辑了响应）

很好的解决方案，但是如果我们点击浏览器后退按钮就不起作用。还是这样？

不，您需要添加额外的 javascript 来处理它。取决于你的意思。

【参考方案2】：

这里有一个替代方案，不需要js，支持浏览器后退导航：

<p:tabView cache="true" activeIndex="#param.id">
   <p:tab title="First Tab">
      // Content
   </p:tab>
   <p:tab title="Second Tab">
      // More Content
   </p:tab>
</p:tabView>

加载第一个选项卡打开的页面：

/mypage.xhtml?id=0

在打开第二个标签页的情况下加载页面：

/mypage.xhtml?id=1

但缺点是您只能使用整数，无法使用选项卡 ID 来处理选项卡。