Auswählen einer jQuery-Registerkarte mit einem Parameter in der URL

Question

Ich untersuche zur Zeit die Registerkarten, die von einer Struts 1-Tag-Bibliothek bereitgestellt werden, durch die von jQuery UI bereitgestellten Registerkarten. Es ist mir gelungen, die Registerkarten in die vorhandene Anwendung zu integrieren, aber ich habe Schwierigkeiten, den ausgewählten Tab mithilfe eines Parameters für die eingehende URL festzulegen, also myurl.com/action.do?selectedTab=SecondTab.

Ich bin ein Neuling in JavaScript und jQuery; Was sind einige Hinweise darauf, wo ich anfangen soll?

Answer 1

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

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

Aus documentation:

#select 

Signatur:

.tabs('select' , [index]) 

Wählen Sie eine Registerkarte aus, als ob sie angeklickt wurde. Das zweite Argument ist der auf Null basierende Index der zu wählenden Registerkarte oder der ID-Selektor des Panels, mit dem die Registerkarte verknüpft ist (der href-Fragmentbezeichner der Registerkarte, z. B. Hash, zeigt auf die ID des Bereichs).

Answer 2

Der folgende Link eines jQuery-Plugins scheint ein möglicher Kandidat für eine Lösung zu sein, da es Ihnen die URL und die Komponenten zur Verfügung stellt. Sie würden dann den Wert übereinstimmen entweder mit der Lage sein, den Index der Registerkarte, die Sie auswählen möchten oder von ID oder Klasse durch die jQuery-Selektor:

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

Ich denke, es ist genug, Geschichte zu laden und diese an die Arbeit.

Answer 4

ich einen etwas anderen Ansatz haben, die nicht unbedingt auf angewiesen ist die eingebaute in select() Funktion, nicht aber das livequery-Plugin verwenden:

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

, die eine leistungsstärkere Version der jQuery-Live-Funktion. Es kann zukünftige Elemente, die einer Abfrage entsprechen, problemlos binden.

Sie Registerkarten Struktur Angenommen, haben wie folgt:

<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> 

ideal, möchten Sie eine URL-Struktur wie folgt aus:

mydomain/mypage?tab=tab2 

es ziemlich schwierig wird, weil die select() Methode integer nur unterstützt Indizes und was passiert, wenn Sie Ihre Tabs ändern?

Gesetzt können Sie die URL-Parameter in eine Variable erhalten, wie oben angegeben, Folgendes zu tun:

Zuerst suchen Sie Ihre Zielelement und eine Klasse, um es hinzuzufügen:

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

Weiter Sie binden livequery Funktion zum Element:

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

Dies wird es passen nur einmal es war tabula~~POS=TRUNC ified und praktisch ‚Klick‘ es.

Dann können Sie Ihre Tabs-Funktion ohne Parameter aufrufen:

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

und sobald es fertig ist, wird die Registerkarte automatisch angeklickt und ausgewählt werden!

Noch besser wäre es, können Sie die Registerkarten Schöpfung binden sich an Livequery:

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

so, dass alle Elemente, die Sie mit Klasse‘.Tabs' werden automatisch in Tabs auf Last umgewandelt werden, die jetzt oder in der Zukunft !

Answer 5

Jquery-UI geben Sie das für (fast) kostenlos: Verwenden Sie die internen Links. Und es ist besser als hässliche get Parameter zu verwenden.

Übergeben http://my.site.org/mypage/#foo-tab in Ihrem Navigator wählt automatisch die Registerkarte mit dem Container mit ID = "foo-tab".

Der Trick ist, um ein Ereignis fügen Sie die URL zu aktualisieren, wenn eine Auswahl der Registerkarte, so dass, wenn Sie neu zu laden Sie nicht den aktuellen Tab verlieren:

$(document).ready(function() { 
     $("#tabs").bind('tabsselect', function(event, ui) { 
      window.location.href=ui.tab; 
     }); 
    });