web-dev-qa-db-ja.com

URLのパラメーターを使用してjQueryタブを選択する

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

私はJavaScriptとjQueryの新人です。どこから始めればよいのでしょうか？

jqueryjquery-uitabs
20
djsnowsill

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を指します）。

22
zihotki

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;
        });
    });
26
Stan

組み込みの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'の要素は、現在または将来、ロード時に自動的にタブに変換されます。

1
artsy.ca

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

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

1
REA_ANDREW

履歴をロードしてこれを機能させるには十分だと思います。

0
Ionuț Staicu