我希望能够链接到PrimeFaces的“tabView”中的各个标签。换句话说,如果我的页面“test.jsf”有一个带有标题为“示例”的选项卡的tabView,我希望能够单击“Test.jsf#Example”的链接并自动加载“示例”选项卡。我怎么能这样做?
答案 0 :(得分:3)
这可以通过一点点JavaScript(使用jQuery)来完成。我希望我已经很好地评论了以下代码,以便可以理解。
<script type="text/javascript">
// What this does: when the page is loaded with a URL fragment (i.e, the #abc in example.com/index.html#abc),
// load the tab (by "clicking" on the link) that has the same text value as the fragment.
// Example: if you go to test.jsf#Example, the tab called "Example" will be clicked and loaded.
// This allows individual tabs to be linked to, and puts what tab you were on in the history.
navigateToTab = function () {
if (window.location.hash) {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
if (jQuery(el).text() === window.location.hash.replace('#', '')) {
jQuery(el).click();
return;
}
})
}
};
jQuery().ready(navigateToTab);
jQuery(window).bind('hashchange', navigateToTab);
// This makes it so that if you click a tab, it sets the URL fragment to be the tab's title. See above.
// E.g. if you click on the tab called "Example", then it sets the onclick attribute of the tab's "a" tag
// to be "#Example"
setupTabFragmentLinks = function () {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
el.onclick = function() {window.location = '#' + jQuery(el).text()};
})
};
jQuery().ready(setupTabFragmentLinks);
</script>
您所要做的就是在包含选项卡的页面中插入JavaScript。然后,您可以获得指向常规<a href='test.jsf#Example>Click here!</a>
的标签的链接。另外一个好处是,您所使用的标签成为浏览器历史记录的一部分;即,如果您离开带有标签的页面,然后按“后退”按钮,您将返回到您所在的标签页。
注意:如果tabView发生更改(例如添加或删除标签),则需要再次调用setupTabFragmentLinks。
答案 1 :(得分:1)
Primefaces为<p:tabView/>
(以及许多其他组件)提供了一个javascript API。您可以在select(index)
的客户端widgetVar
名称上调用<p:tabView/>
方法。例如,在选项卡视图
<p:tabView id="thePanel" widgetVar="tabPanel"/>
从<p:CommandButton/>
,您可以在tabPanel.select(1)
属性中调用onclick
以选择第一个标签,依此类推
<p:commandButton update=":thePanel" value="Do It " id="doIt" onclick="tabPanel.select(1)"/>