Sélection d'un onglet jQuery en utilisant un paramètre dans l'URL

Question

J'étudie actuellement le remplacement des onglets fournis par une bibliothèque de balises Struts 1 par les onglets fournis par jQuery UI. J'ai réussi à intégrer les onglets à l'application existante, mais j'ai du mal à définir l'onglet sélectionné en utilisant un paramètre sur l'URL entrante, à savoir myurl.com/action.do?selectedTab=SecondTab.

Je suis un nouveau venu dans JavaScript et jQuery; Quels sont quelques conseils sur par où commencer?

Answer 1

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

De documentation:

#select 

Signature:

.tabs('select' , [index]) 

Sélectionnez un onglet, comme s'il avait été cliqué. Le deuxième argument est l'index à base zéro de l'onglet à sélectionner ou le sélecteur d'identifiant du panneau auquel l'onglet est associé (l'identificateur de fragment href de l'onglet, par exemple hash, pointe sur l'identifiant du panneau).

Answer 2

Le lien suivant d'un plugin jQuery semble être un candidat possible pour une solution, car il vous fournit l'URL et les composants. Vous serez alors en mesure de correspondre à la valeur soit avec l'index de l'onglet que vous souhaitez sélectionner ou par identifiant ou classe par le sélecteur 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

je suppose qu'il suffit de charger l'histoire et que cela fonctionne.

Answer 4

J'ai une approche légèrement différente qui ne repose pas nécessairement sur la fonction intégrée select(), mais n'utilise le plugin livequery:

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

qui est une version plus puissante de la fonction live jQuery. Il peut facilement lier les éléments futurs qui correspondent à une requête.

Supposons que vous ayez une structure onglets comme suit:

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

idéalement, vous voulez une structure d'URL comme ceci:

mydomain/mypage?tab=tab2 

il devient assez difficile, car la méthode select() supporte seul entier indices, et que se passe-t-il lorsque vous modifiez vos onglets?

Supposant vous pouvez obtenir le paramètre url dans une variable comme indiqué ci-dessus pour effectuer les opérations suivantes:

D'abord, vous localiser votre élément cible et d'ajouter une classe à elle:

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

Ensuite, vous lier un fonction livequery à l'élément:

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

Cela correspond seulement une fois qu'il a été tabulations ified et pratiquement « cliquez sur » il.

Ensuite, vous pouvez appeler votre fonction tabs sans paramètre:

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

et une fois terminée, l'onglet sera automatiquement cliqué et sélectionnée!

Mieux encore, vous pouvez lier la création d'onglets pour se livequery:

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

afin que tous les éléments que vous avez avec la classe » .Tabs' seront automatiquement converties en onglets sur la charge, maintenant ou dans l'avenir !

Answer 5

Jquery-UI vous donne ça pour (presque) gratuitement: Utilisez les liens internes. Et c'est mieux que d'utiliser des paramètres d'obtention moche. Passer le http://my.site.org/mypage/#foo-tab dans votre navigateur sélectionne automatiquement l'onglet avec le conteneur ayant id = "foo-tab".

L'astuce est d'ajouter un événement à mettre à jour l'URL lors de la sélection d'un onglet de sorte que lorsque vous vous rajoutez ne perdez pas l'onglet en cours:

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