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

Question

現在、Strutsタグライブラリによって提供されるタブをjQuery UIで提供されるタブに置き換えることを検討中です。私は正常に既存のアプリケーションと統合されたタブを得るために管理しましたが、私は入力したURLのパラメータ、つまりmyurl.com/action.do?selectedTab=SecondTabを使用して、選択したタブを設定する方法に苦労しています。

JavaScriptとjQueryの新人です。どこから始めるべきですか？

Answer 1

http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2を使用して：あなたは、あなたはjQueryのセレクタにより選択するか、IDまたはクラスでするタブのインデックスはどちらかと値と一致することができるだろう

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

からdocumentation：

#select 

署名：

.tabs('select' , [index]) 

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

Answer 2

jQueryプラグインの次のリンクは、URLとコンポーネントの部分を提供するため、ソリューション候補として考えられます。

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

Answer 3

• http://stilbuero.de/jquery/history/index.html
• http://stilbuero.de/jquery/tabs/index.html#fragment-1

私は歴史をロードし、仕事にこれを取得するのに十分であると思います。

Answer 4

私は必ずしも組み込みの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（）メソッドは、整数のみをサポートしているので、それはかなりトリッキーになりあなたのタブを変更するとどうなりますか？

まず、あなたのターゲット要素を見つけて、それにクラスを追加します：

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

次はあなたがバインド

あなたが次の操作を行うために上記のように変数にURLパラメータを取得することができますと仮定すると要素にlivequery機能：

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

これは、それが、タブ-ifiedをされている一度だけ一致し、事実上、それを「クリック」します。

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

と、それは完全だと、タブが自動的にクリックして選択されます。

その後、あなたはパラメータなしであなたのタブの機能を呼び出すことができます！

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

クラスであなたが持っている任意の要素の.Tabs'は自動的に現在または将来的には、負荷時にタブに変換されるように：

いっそのこと、あなたは自分自身をlivequeryするには、タブの作成をバインドすることができます！

Answer 5

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

ナビゲータに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; 
     }); 
    });