vertical - jQuery UI Tabs back button history

jquery vertical tabs

Question

¿Alguien ha podido obtener jQuery UI Tabs 3 (Última versión) trabajando con el botón Atrás?

Me refiero a que si el usuario pulsa el botón Atrás deberían ir a la pestaña visitada previamente en la página, no a una página diferente.

El complemento de historial parece que puede funcionar, pero parece que no funciona con las pestañas cargadas de ajax.

Si alguien ha logrado hacer que esto funcione, sería muy apreciado, ¡gracias!

Answer 1

Actualización: la solución que publiqué no soluciona el problema que describí ^^ se publicará nuevamente si recuerdo cuándo lo resolví. Actualización2: he "resuelto" el problema por ahora (ver más abajo).

La pregunta es un poco vieja, pero si alguien tropieza con esta pregunta como yo lo hice, un cambio rápido a la solución anterior de Justin Hamade podría ayudar a algunas personas.

Si utiliza el evento externalChange de Jquery Address en lugar de solo "cambiar", evita enviar una solicitud superflua (en mi caso, se produce un error en la consola de JavaScript). Esto es porque si alguien hace clic en una pestaña la dirección cambia por sí misma (gracias a jquery ui), este cambio desencadena $ .address.change una vez, que selecciona una pestaña a pesar de que jquery-ui ya lo ha hecho ... Al menos yo Creo que eso es lo que estaba pasando.

Tampoco me gustaron las pestañas que crean hashes como "# ui-tab-2", "# ui-tab-3", etc., así que utilicé el siguiente código que hace que las urls usen los nombres de los elementos de anclaje como hashes ( es decir, "www.example.com # cool_stuff" en lugar 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);
  });

});

Sin embargo, A) Soy nuevo en jquery y no estoy seguro de que esto sea eficiente / seguro / "La forma correcta de hacerlo", y B) Asegúrese de usar esto solo si puede estar seguro de que el atributo ''nombre'' de los anclajes no tiene ningún carácter que no sea URI seguro (es decir, espacio).

Actualización 2: he "resuelto" el problema en la Actualización 1 por ahora, pero tiene la línea terriblemente fea:

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

Porque aparentemente la función $ .address.hash (val) agrega un "/ #" después del primer hash, pero si no usamos $ .address.hash (val) entonces se activa el ExternalChange (por window.location.hash = val)

Answer 2

Actualmente estoy usando este complemento: http://flowplayer.org/tools/demos/tabs/ajax-history.htm

Answer 3

El plugin jQuery History/Remote hace eso. Los creadores de las pestañas y el historial / complementos remotos son la misma persona, y los tiene trabajando juntos here .

Answer 4

Me encontré con esto también. Es realmente fácil con el complemento de dirección jquery aquí http://www.asual.com/jquery/address/

La demostración de pestañas parecía un poco complicada. Acabo de hacer esto:

$(''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 5

Parece que la compatibilidad con el botón de retroceso actualmente no está integrada en las pestañas de la jQuery UI: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

Answer 6

Sugiero echar un vistazo a esto: http://www.asual.com/jquery/address/ te permite hacer enlaces profundos, junto con tus llamadas AJAX.