20

現在、 Struts 1 タグ ライブラリが提供するタブを jQuery UI が提供するタブに置き換えることを調査しています。タブを既存のアプリケーションに統合することに成功しましたが、着信 URL のパラメーター (myurl.com/action.do?selectedTab=SecondTab) を使用して選択したタブを設定する方法に苦労しています。

私は JavaScript と jQuery の初心者です。どこから始めるべきかについてのいくつかの指針は何ですか?

4

4 に答える 4

26

Jquery-UIはそれを（ほぼ）無料で提供します：内部リンクを使用します。そして、醜いgetパラメーターを使用するよりも優れています。

ナビゲーターでhttp://my.site.org/mypage/#foo-tabを渡すと、id="foo-tab"を持つコンテナーを持つタブが自動的に選択されます。

秘訣は、タブを選択するときにURLを更新するイベントを追加して、リロードしたときに現在のタブが失われないようにすることです。

   $(document).ready(function () {
        $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;
        });
    });
于 2010-06-14T12:59:45.327 に答える
22

http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2を使用:

$(document).ready(function(){
    var param = $(document).getUrlParam('selectedTab');
    $('#menu').tabs('select', param);
});

ドキュメントから： 

#select

サイン： 

.tabs( 'select' , [index] )

クリックされたかのように、タブを選択します。2 番目の引数は、選択するタブの 0 から始まるインデックス、またはタブが関連付けられているパネルの ID セレクターです (ハッシュなどのタブの href フラグメント識別子は、パネルの ID を指します)。

于 2009-02-22T10:45:03.937 に答える
1

次の jQuery プラグインのリンクは、URL とコンポーネント パーツを提供するため、解決策の候補のようです。次に、選択するタブのインデックス、または jQuery セレクターを介した ID またはクラスのいずれかと値を一致させることができます。

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3

于 2009-02-22T10:34:23.633 に答える
1

必ずしも組み込みの select() 関数に依存するわけではありませんが、livequery プラグインを使用する、少し異なるアプローチがあります。

http://plugins.jquery.com/project/livequery/

これは、jQuery ライブ関数のより強力なバージョンです。クエリに一致する将来の要素を簡単にバインドできます。

次のようなタブ構造があるとします。

<div class="Tabs">
<ul class="nav">
<li><a id="tab1">Link 1</a></li>
<li><a id="tab2">Link 2</a></li>
<li><a id="tab3">Link 3</a></li>
</ul>
..
..
</div>

理想的には、次のような URL 構造が必要です。

mydomain/mypage?tab=tab2

select() メソッドは整数インデックスしかサポートしていないため、非常に扱いにくくなります。また、タブを変更するとどうなるでしょうか。

上記のように url パラメーターを変数に取得して、次のことを実行できるとします。

まず、ターゲット要素を見つけてクラスを追加します。

jQuery('a#' + param).addClass('selectMe');

次に、livequery 関数を要素にバインドします。

jQuery('.ui-tabs-nav a.selectMe').livequery(function(){
 jQuery(this).removeClass('selectMe').triggerHandler('click');
});

これは、タブ化されて実質的に「クリック」された場合にのみ一致します。

次に、パラメーターなしでタブ関数を呼び出すことができます。

jQuery(".Tabs").tabs();

完了すると、タブが自動的にクリックされて選択されます。

さらに良いことに、タブの作成を livequery 自体にバインドできます。

jQuery(".Tabs").livequery(function(){
    jQuery(this).tabs();    
});

クラス '.Tabs' を持つ要素は、現在または将来、ロード時に自動的にタブに変換されます!

于 2010-05-14T20:01:54.407 に答える