8

正常に機能しているJqueryUIタブの基本的な実装を使用していますが、ユーザーアクションに基づいてアクティブなタブを動的に設定（またはリセット）したいと考えています。

  1. クエリ文字列の値に基づいてアクティブなタブを設定するにはどうすればよいですか？以前のタブソリューションでは、クエリ文字列値を渡し、ページが読み込まれたときにアクティブなタブを設定することができました。（他の技術的な課題のために、この古いソリューションを放棄する必要がありました。）

  2. ユーザーがブラウザアプリケーションで[保存]ボタンを選択し、ブラウザページがリロードされた場合、保存を押す前に表示されていたタブにフォーカスを維持するにはどうすればよいですか？

  3. ユーザーがブラウザアプリケーションの[タスク]ページに戻ったときにアクティブなタブを設定するにはどうすればよいですか？たとえば、すべて私のWebアプリケーション内で、ユーザーが[プロジェクト]ページを参照してから[タスク]ページに戻った場合、以前に表示されていたタブをリセットするにはどうすればよいですか？

Javascript：

$(function() {
   $("#tabs").tabs();
});

HTMLサンプルコード：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Description</a></li>
        <li><a href="#tabs-2">Action</a></li>
        <li><a href="#tabs-3">Resources</a></li>
        <li><a href="#tabs-4">Settings</a></li>
    </ul>

<div id="tabs-1">
    <p>Description content</p>
</div>

<div id="tabs-2">
    <p>Action content</p>
</div>

<div id="tabs-3">
    <p>Resources content</p>
</div>

<div id="tabs-4">
    <p>Settings </p>
</div>

</div>
4

3 に答える 3

13

追加の調査と試行錯誤の末、自分のjQueryタブの問題を解決しました。これが実際の例です。これが最もエレガントなソリューションかどうかはわかりませんが、機能します。これがお役に立てば幸いです。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
    <script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#tabs").tabs({active: document.tabTest.currentTab.value});

            $('#tabs a').click(function(e) {
                var curTab = $('.ui-tabs-active');
                curTabIndex = curTab.index();
                document.tabTest.currentTab.value = curTabIndex;
            });
        });
    </script>
</head>

<body>
    <form name="tabTest" method="post" action="tab">
        <!-- default tab value 2 for Tab 3 -->            
        <input type="hidden" name="currentTab" value="2"/> 
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
                <li><a href="#tabs-3">Tab 3</a></li>
            </ul>
            <div id="tabs-1">Tab 1 Content</div> 
            <div id="tabs-2">Tab 2 Content</div>
            <div id="tabs-3">Tab 3 Content</div>
        </div>
    </form>
</body>

これが私の以前の質問のそれぞれに答えた方法です。

1.クエリ文字列の値に基づいてアクティブなタブを設定するにはどうすればよいですか？ 結局、クエリ文字列を使用する必要はありませんでした。URLの最後に＃tabs-xを追加しました。たとえば、タブ3への直接リンクが必要な場合は、リンクを次のようにコーディングしました。

localhost:8080/pm/detail?prjID=2077#tabs-3

2.ユーザーがブラウザアプリケーションで[保存]ボタンを選択し、ブラウザページがリロードされた場合、保存を押す前に表示されていたタブにフォーカスを維持するにはどうすればよいですか？

これを解決するには、クリックイベントをキャプチャし、現在のタブインデックスを取得してから、非表示のフォーム要素「currentTab」を設定して現在のタブ値を保存します。次に、Javaサーブレットに戻って、非表示のフォーム要素を取得し、ページがリロードされたときにリセットしました。

$(document).ready(function() {
        // Set active tab on page load
        $("#tabs").tabs({active: document.tabTest.currentTab.value});

        // Capture current tab index.  Remember tab index starts at 0 for tab 1.
        $('#tabs a').click(function(e) {
            var curTab = $('.ui-tabs-active');
            curTabIndex = curTab.index();
            document.tabTest.currentTab.value = curTabIndex;
        });
    });

3.ユーザーがブラウザアプリケーションのプロジェクトページに戻ったときにアクティブなタブを設定するにはどうすればよいですか？たとえば、すべて私のWebアプリケーション内で、ユーザーが[タスク]ページを参照してから[プロジェクト]ページに戻った場合、以前に表示されていたタブをリセットするにはどうすればよいですか？

これは、Javaサーブレットでセッション変数を設定して、非表示のフォーム要素「currentTab」を格納することで解決されます。そうすれば、プロジェクトページに戻ったときに、「フォームの保存」アクションで設定したのと同じ方法で「currentTab」の値をリセットできます。

この例が他の誰かのjQueryタブの問題に役立つことを願っています！

于 2013-03-21T14:07:54.047 に答える
0

jQueryUIタブはオプションを取り込むことができます。あなたの質問に特に役立つのはcookieとselectedです。ここでオプションについて読むことができます。

于 2013-03-14T23:02:26.830 に答える
0 
     var currentTab = $('.ui-state-active a').index();
    currentTab = $('#divMainContent').find('#sel_tab')[0].value;

注：Sel_tabが非表示フィールドである場合。onclick on tabs achor linkは、非表示のフィールドに値を割り当てます

于 2015-02-18T17:44:25.323 に答える