如何使PrimeFaces选项卡“可链接"? [英] How can I make PrimeFaces tabs "linkable"?

问题描述

我希望能够链接到PrimeFaces的"tabView"中的各个标签.换句话说，如果我的页面"test.jsf"具有带有名为"Example"的选项卡的tabView，我希望能够单击指向"Test.jsf#Example"的链接，并自动加载"Example"选项卡.我该怎么办?

I would like to be able to link to individual tabs in a PrimeFaces' "tabView". In other words, if my page "test.jsf" has a tabView with a tab entitled "Example", I want to be able to click a link to "Test.jsf#Example" and have the "Example" tab loaded automatically. How can I do this?

推荐答案

这可以使用少量的JavaScript(使用jQuery)来完成.我希望我已经对以下代码进行了充分的注释，以便可以理解.

This can be done with a wee bit of JavaScript (using jQuery). I hope I have commented the following code well-enough that it can be understood.

<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>链接到选项卡.另外一个好处是，您所在的标签页已成为浏览器历史记录的一部分；也就是说，如果您离开包含标签页的页面，然后按返回"按钮，则会返回到您所在的标签页.

All you have to do is insert that JavaScript in the page that has the tabs. Then you can get a link to a tab with the usual <a href='test.jsf#Example>Click here!</a>. An added bonus is that the tab you were on becomes part of the browser history; i.e., if you navigate away from the page that has the tabs, then press the "back" button, you are brought back to the tab you were on.

注意:如果tabView发生了变化(例如，您添加或删除了标签页)，则需要再次调用setupTabFragmentLinks.

Note: if the tabView changes (e.g. you add or remove tabs), you will need to call setupTabFragmentLinks again.

这篇关于如何使PrimeFaces选项卡“可链接"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！