Selezione di una scheda jQuery utilizzando un parametro nell’URL

Attualmente sto esaminando la sostituzione delle tabs fornite da una libreria di tag Struts 1 con le tabs fornite dall’interfaccia utente di jQuery. Sono riuscito a integrare le tabs 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?

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

Dalla documentazione :

 #select 

Firma:

 .tabs( 'select' , [index] ) 

Seleziona una scheda, come se fosse stata cliccata. 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).

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

Passando su http://my.site.org/mypage/#foo-tab nel navigatore, si seleziona automaticamente la scheda con il contenitore id = “foo-tab”.

Il trucco consiste nell’aggiungere un evento per aggiornare l’url quando si seleziona una scheda in modo che quando si ricarica non si perda la scheda corrente:

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

Ho un approccio leggermente diverso che non si basa necessariamente sulla funzione select (), ma usa 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 a tabs come segue:

  

idealmente, vuoi una struttura di URL come questa:

 mydomain/mypage?tab=tab2 

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

Supponiamo che tu possa ottenere il parametro url in una variabile come sopra indicato per fare quanto segue:

Per prima cosa localizzi il tuo elemento di destinazione e aggiungi una class ad esso:

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

Successivamente si associa una funzione di livequery all’elemento:

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

Questo lo abbinerà solo una volta che sarà stato tabulato e virtualmente lo farà “clic”.

Quindi, puoi chiamare la funzione Tabs senza parametri:

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

e una volta completato, la scheda verrà automaticamente selezionata e selezionata!

Meglio ancora, puoi associare la creazione delle tabs a livequery stessa:

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

in modo che tutti gli elementi che hai con la class ‘.Tabs’ verranno automaticamente convertiti in tabs al caricamento, ora o in futuro!

Il seguente link di un plugin jQuery sembra un ansible candidato per una soluzione, in quanto fornisce l’URL e le parti del componente. Sarai quindi in grado di abbinare il valore con l’indice della scheda che desideri selezionare o tramite ID o class tramite il selettore jQuery:

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

Suppongo sia sufficiente caricare la cronologia e farlo funzionare.