web-dev-qa-db-fra.com

Sélection d'un onglet jQuery à l'aide d'un paramètre dans l'URL

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, c'est-à-dire myurl.com/action.do?selectedTab=SecondTab.

Je suis un nouveau venu dans JavaScript et jQuery; Quels sont les indicateurs par où commencer?

jqueryjquery-uitabs
20
djsnowsill

Utilisation de 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 de base zéro de l'onglet à sélectionner ou le sélecteur d'id du panneau auquel l'onglet est associé (l'identifiant de fragment href de l'onglet, par exemple, le hachage, pointe vers l'id du panneau).

22
zihotki

Jquery-UI vous offre cela pour (presque) gratuitement: utilisez les liens internes. Et c'est mieux que d'utiliser des paramètres get laids.

Passer http://my.site.org/mypage/#foo-tab dans votre navigateur sélectionnera automatiquement l'onglet avec le conteneur ayant id = "foo-tab".

L'astuce consiste à ajouter un événement pour mettre à jour l'url lors de la sélection d'un onglet afin que lorsque vous rechargez vous ne perdez pas l'onglet actuel:

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

J'ai une approche légèrement différente qui ne repose pas nécessairement sur la fonction intégrée select (), mais 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 futurs éléments qui correspondent à une requête.

Supposons que vous ayez une structure d'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 celle-ci:

mydomain/mypage?tab=tab2

cela devient assez délicat car la méthode select () ne prend en charge que les indices entiers, et que se passe-t-il lorsque vous changez d'onglets?

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

Commencez par localiser votre élément cible et ajoutez-y une classe:

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

Ensuite, vous liez une fonction livequery à l'élément:

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

Cela ne correspondra qu'à une fois qu'il a été tabulé et quasiment "cliqué" dessus.

Ensuite, vous pouvez appeler la fonction de vos onglets sans paramètres:

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

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

Mieux encore, vous pouvez lier la création des onglets à livequery lui-même:

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

de sorte que tous les éléments que vous avez avec la classe '.Tabs' seront automatiquement convertis en onglets lors du chargement, maintenant ou dans le futur!

1
artsy.ca

Le lien suivant d'un plugin jQuery semble un candidat possible pour une solution, car il vous fournit l'URL et les composants. Vous pourrez alors faire correspondre la valeur avec l'index de l'onglet que vous souhaitez sélectionner ou par id ou classe via le sélecteur jQuery:

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

1
REA_ANDREW

Je suppose qu'il suffit de charger l'historique et de faire fonctionner cela.

0
Ionuț Staicu