Selezione di una scheda jQuery utilizzando un parametro nell'URL

Question

Attualmente sto esaminando la sostituzione delle schede fornite da una libreria di tag Struts con le schede fornite dall'interfaccia utente di jQuery. Sono riuscito a integrare le schede con l'applicazione esistente, ma non riesco a impostare la scheda selezionata utilizzando un parametro sull'URL in entrata, ovvero myurl.com/action.do?selectedTab=SecondTab.

Sono un nuovo arrivato in JavaScript e jQuery; quali sono alcuni indicatori su dove iniziare?

Answer 1

Utilizzando 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); 
}); 

Da documentation:

#select 

Firma:

.tabs('select' , [index]) 

Selezionare una scheda, come se fosse stata selezionata. Il secondo argomento è l'indice a base zero della scheda da selezionare o il selettore ID del pannello a cui è associata la scheda (l'identificatore del frammento href della scheda, ad esempio hash, punta all'ID del pannello).

Answer 2

Il seguente collegamento di un plugin jQuery sembra un possibile candidato per una soluzione, poiché fornisce l'URL e le parti del componente. Si sarebbe quindi in grado di eguagliare il valore sia con l'indice della scheda che si desidera selezionare o per Codice o di classe attraverso il selettore jQuery:

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

Credo che sia sufficiente per caricare storia e farlo funzionare.

Answer 4

Ho un approccio leggermente diverso che non necessariamente fare affidamento sulla funzione built-in select(), ma non usare il plugin livequery:

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

che è una versione più potente della funzione live di jQuery. Può facilmente associare elementi futuri che corrispondono a una query.

Supponiamo di avere una struttura di schede come segue:

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

idealmente, si vuole una struttura URL come questo:

mydomain/mypage?tab=tab2 

diventa piuttosto difficile perché il metodo select() supporta solo numeri interi indici e cosa succede quando cambi le tue schede?

Supponendo è possibile ottenere il parametro url in una variabile come indicato sopra per effettuare le seguenti operazioni:

primo a localizzare il vostro elemento di destinazione e aggiungere una classe ad esso:

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

successivo si associa un la funzione livequery all'elemento:

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

Ciò corrisponde solo una volta è stato tab-ified e virtualmente 'clic' esso.

Quindi, è possibile chiamare la funzione schede senza parametri:

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

e una volta che è completo, la scheda verrà automaticamente cliccato e selezionata!

ancora meglio, è possibile associare la creazione schede per livequery stessa:

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

in modo che tutti gli elementi che avete con classe' .Tabs' saranno automaticamente convertiti in schede su di carico, ora o in futuro !

Answer 5

Jquery-UI ti dà quello per (quasi) libero: utilizzare i collegamenti interni. Ed è meglio che usare i parametri get brutti.

Passando http://my.site.org/mypage/#foo-tab nel vostro navigatore sarà automaticly selezionare la scheda con il contenitore avendo id = "foo-tab".

Il trucco è quello di aggiungere un evento per aggiornare l'URL quando si seleziona una scheda in modo che quando si ricarica non perdete la scheda corrente:

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