Wybieranie zakładki jQuery za pomocą parametru w adresie URL

Question

Obecnie badam wymianę kart dostarczonych przez bibliotekę znaczników 1 za pomocą kart dostarczonych przez interfejs użytkownika jQuery. Udało mi się uzyskać zakładki zintegrowane z istniejącą aplikacją, ale mam problem z ustawieniem wybranej karty za pomocą parametru na przychodzącym adresie URL, czyli myurl.com/action.do?selectedTab=SecondTab.

Jestem nowicjuszem w JavaScript i jQuery; Jakie są wskazówki, od czego zacząć?

Answer 1

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

Od documentation:

#select 

Podpis:

.tabs('select' , [index]) 

Wybierz kartę, tak jakby została kliknięta. Drugi argument jest indeksem opartym na zeru dla wybranej karty lub selektorem id panelu, z którym powiązana jest karta (identyfikator fragmentu href karty, np. Hash, wskazuje na identyfikator panelu).

Answer 2

Poniższy link wtyczki jQuery wydaje się być potencjalnym kandydatem do rozwiązania, ponieważ zapewnia adres URL i części składowe. Można by następnie móc odpowiadać wartości z obu indeksu na karcie, którą chcesz wybrać lub ID lub klasie poprzez selektor 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

Myślę, że to wystarczy, aby załadować historię i uzyskać to do pracy.

Answer 4

mam nieco inne podejście, które nie muszą polegać na wbudowanej funkcji select(), ale nie używać wtyczki livequery:

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

która jest mocniejsza wersja z funkcji live jQuery. Może łatwo wiązać przyszłe elementy pasujące do zapytania.

Załóżmy, że mają strukturę zakładki następująco:

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

idealnie, chcesz strukturę URL tak:

mydomain/mypage?tab=tab2 

staje się dość trudne, ponieważ metody Select() obsługuje tylko całkowitą indeksy i co się dzieje, gdy zmieniasz karty?

Przypuśćmy można uzyskać parametru URL do zmiennej, jak wskazano powyżej, aby wykonać następujące czynności:

Najpierw zlokalizuj elementu docelowego i dodać klasę do niego:

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

Następny zwiążesz funkcja livequery do elementu:

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

Dopasuje się do niej tylko po jej zaznaczeniu i praktycznie "kliknięciu".

Następnie można nazwać swoją funkcję zakładki bez parametrów:

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

i po jej zakończeniu zakładka zostanie automatycznie kliknięciu i wybrany!

Jeszcze lepiej, można powiązać utworzenie zakładki do livequery się:

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

tak, że wszelkie elementy trzeba z klasą”.Tabs' zostaną automatycznie przeliczone na kartach upon obciążenia, teraz lub w przyszłości !

Answer 5

Jquery-UI daje to za (prawie) za darmo: Użyj wewnętrznych linków. I jest to lepsze niż używanie brzydkich parametrów get.

Przekazywanie http://my.site.org/mypage/#foo-tab w nawigatorze automatycznie wybierze kartę z kontenerem o id = "foo-tab".

Sztuką jest, aby dodać zdarzenie do aktualizacji url przy wyborze karty tak, że kiedy przeładować nie stracić obecną kartę:

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