2

PrimeFaces の「tabView」で個々のタブにリンクできるようにしたいと考えています。つまり、私のページ「test.jsf」に「Example」というタイトルのタブを含む tabView がある場合、「Test.jsf#Example」へのリンクをクリックして、「Example」タブを自動的にロードできるようにしたいと考えています。これどうやってするの？

4

2 に答える 2

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 を再度呼び出す必要があります。

于 2013-01-08T19:35:30.263 に答える
1

Primefacesは、<p:tabView/>（および他の多くのコンポーネント）用のjavascriptAPIを提供します。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)"/>
于 2013-01-10T00:50:58.940 に答える