web-dev-qa-db-fra.com

jQuery UI Tabs retourne l'historique des boutons

Est-ce que quelqu'un a réussi à faire en sorte que jQuery UI Tabs 3 (dernière version) fonctionne avec le bouton Précédent?

Je veux dire que si l'utilisateur appuie sur le bouton Précédent, il doit accéder à l'onglet précédemment visité de la page, et non à une autre page.

Le plug-in historique semble pouvoir fonctionner, mais je ne peux pas sembler le faire fonctionner avec des onglets chargés Ajax.

Si quelqu'un a réussi à faire ce travail, ce serait très apprécié, merci!

jqueryuser-interfacetabshistoryback
33
CesarHerrera

J'ai juste couru dans ceci aussi. C'est vraiment facile avec le plugin jquery address ici http://www.asual.com/jquery/address/

La démo pour les onglets semblait un peu trop compliquée. Je viens de faire ceci:

$('document').ready(function() {
    // For forward and back
    $.address.change(function(event){
      $("#tabs").tabs( "select" , window.location.hash )
    })

    // when the tab is selected update the url with the hash
    $("#tabs").bind("tabsselect", function(event, ui) { 
      window.location.hash = ui.tab.hash;
    })
});
38
Justin Hamade

Je suggérerais de jeter un coup d'œil à ceci: http://www.asual.com/jquery/address/ il vous permet de créer des liens profonds avec votre AJAX appels.

9
Garrett

Mise à jour: La solution que j'ai publiée ne résout pas le problème que je décris ^^ sera publiée à nouveau si je me souviens bien quand je l'ai résolue. Mise à jour2: J'ai "résolu" le problème pour l'instant (voir ci-dessous).

La question est un peu ancienne, mais si quelqu'un tombe sur cette question comme moi, un changement rapide de la solution ci-dessus de Justin Hamade pourrait aider certaines personnes.

Si vous utilisez l'événement externalChange de Jquery Address au lieu de simplement "changer", il empêche l'envoi d'une requête superflue (dans mon cas, une erreur survient dans la console javascript). En effet, si quelqu'un clique sur un onglet, l'adresse change d'elle-même (grâce à jquery ui), ce changement déclenche une fois $ .address.change, qui sélectionne un onglet même si jquery-ui l'a déjà fait ... Au moins, je pense que c'est ce qui se passait.

De plus, je n’ai pas aimé les onglets créant des hachages comme "# ui-tab-2", "# ui-tab-3", etc., donc j’ai utilisé le code suivant qui oblige les urls à utiliser les noms des éléments d’ancre comme des hachages ( c'est-à-dire "www.example.com # cool_stuff" au lieu de "www.example.com # ui-tab-2"):

$(function() {
  $( "#tabs" ).tabs({
    cache: false,
  });

  // For forward and back
  $.address.externalChange(function(event){
    var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""
    $("#tabs").tabs( "select" , $("#tabs a[name="+ name + "]").attr('href') )
  });
  // when the tab is selected update the url with the hash
  $("#tabs").bind("tabsselect", function(event, ui) { 
    $.address.hash(ui.tab.name);
  });

});

Cependant, A) je suis nouveau dans jquery et je ne suis pas sûr que cela soit efficace/sûr/"La bonne façon de le faire", et B) Assurez-vous de ne l’utiliser que si vous êtes sûr de l’attribut 'name' des ancres. ne contient aucun caractère qui ne soit pas sécurisé par l'URI (c.-à-d. espace).

Update2: J'ai "résolu" le problème dans Update1 pour l'instant, mais la ligne est terriblement laide:

var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""

Parce qu'apparemment la fonction $ .address.hash (val) ajoute un "/ #" après le premier hachage, mais si nous n'utilisons pas $ .address.hash (val), alors externalChange est déclenché (par window.location.hash = val)

3
drostin77

J'utilise actuellement ce plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm

2
FDisk

Il semblerait que le support des boutons de retour ne soit actuellement pas intégré dans les onglets de l'interface utilisateur de jQuery: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

2
brianpeiris

Le jQuery History/Remote plugin le fait. Les créateurs des plug-ins Tabs et History/Remote sont la même personne et les font travailler ensemble ici .

1
karim79

Vous pouvez vous référer au lien du bouton qui ouvre l'onglet, et l'écrire dans l'historique. Après cela ajouter "EventListener" On trace avec son aide le changement de "window.location.hash "et à tout changement, nous appuyons artificiellement sur le bouton avec un tel lien. Ainsi, les transitions dans l'historique à l'aide du bouton Précédent fonctionneront.

$(".btn").click(
        function () {
            window.location = this.href;
        });
    window.addEventListener('hashchange', function () {
        var x = `[href="${window.location.hash}"]`;
        $(x)[0].click();
    });

0
Alexey Miloserdov