jQuery UI Tabs bouton retour de l'histoire

Question

Quelqu'un a été en mesure d'obtenir jQuery UI Tabs 3(Dernière version), en collaboration avec le bouton de retour?

Je veux dire, si l'utilisateur appuie sur le bouton de retour, ils doivent aller pour les déjà visité onglet sur la page, pas une page différente.

L'histoire de brancher des sons comme ça peut fonctionner, mais je ne peux pas semblent le faire fonctionner avec ajax chargé des onglets.

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

Answer 1

Je viens de tomber sur ce sujet. Son vraiment facile avec jquery adresse plugin ici http://www.asual.com/jquery/address/

La démo pour les onglets semblait un peu plus compliqué. 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;
    })
});

Answer 2

Je suggère de prendre un coup d'oeil à ceci: http://www.asual.com/jquery/address/ il vous permet de faire des liens profonds, ainsi que vos appels AJAX.

Answer 3

Mise à jour: La solution que j'ai posté ne résout pas le problème que j'ai décrit ^^ vais poster à nouveau si je me souviens lorsque je le résoudre. Update2: j'ai "résolu" le problème pour l'instant (voir ci-dessous).

La Question est un peu vieux, mais si quelqu'un trébuche sur cette question, comme je l'ai fait, un changement rapide de la solution ci-dessus par Justin Hamade pourrait aider certaines personnes.

Si vous utilisez Jquery Adresse' externalChange de l'événement au lieu de "changement", il empêche l'envoi d'un superflu demande (dans mon cas, résultant en une erreur dans la console javascript). Ce est parce que si quelqu'un clique sur un onglet, le changement d'adresse sur sa propre (grâce à jquery ui), ce changement déclenche $.adresse.changement une fois, qui permet de sélectionner un onglet, même si jquery-ui l'a déjà fait... Au moins je pense que c'est ce qui se passait.

Aussi, je n'aime pas les onglets de la création de hachages comme "#interface utilisateur-onglet-2", "#interface utilisateur-onglet-3", etc, j'ai donc utilisé le code suivant qui en fait l'url à utiliser les noms de l'ancrage des éléments comme les 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);
  });

});

Toutefois, A) je suis nouveau sur jquery et pas sûr que ce soit efficace / coffre-fort / "La bonne Façon De le Faire", et B) assurez-vous de n'utiliser que si vous pouvez être sûr que l'attribut "name" de l'ancre n'a pas tous les caractères qui ne sont pas URI coffre-fort (c'est à dire de l'espace).

Update2: j'ai "résolu" le problème en Update1 pour l'instant, mais il est terriblement laid ligne:

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

Apparemment parce que le $.adresse.hash(val) fonction ajoute un "/#" après la première de hachage, mais si nous n'utilisons pas le $.adresse.hash(val) alors externalChange est déclenchée (par la fenêtre.emplacement.hash=val)

Answer 4

Il semblerait que le bouton précédent n'est actuellement pas intégré dans le jQuery UI tabs: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 5

Je suis actuellement à l'aide de ce plugin: http://flowplayer.org/tools/demos/tabs/ajax-history.htm