2009-05-01 17 views
33

¿Alguien ha podido obtener jQuery UI Tabs 3 (versión más reciente) trabajando con el botón Atrás?jQuery UI Tabs historial del botón

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

Parece que el complemento de historial funciona, pero parece que no funciona con pestañas cargadas de ajax.

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

Respuesta

1

El plug-in de jQuery History/Remote hace eso. Los creadores de las pestañas e Historial/Complementos remotos son la misma persona, y los tiene trabajando juntos here.

+0

La versión que está usando aquí es la versión anterior, es hasta la versión 3 que es la que estoy usando, disculpas, debería haber escrito que en. – CesarHerrera

+0

'aquí' el enlace está roto. Da "Objeto no encontrado" –

38

Acabo de toparme 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; 
    }) 
}); 
3

Actualización: La solución que he publicado no se soluciona el problema que he descrito ^^ a publicar de nuevo si recuerdo cuando lo resuelvo . Update2: He "resuelto" el problema por ahora (ver a continuación).

La pregunta es un poco antigua, pero si alguien tropieza con esta pregunta como yo, 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", impide 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. usé el siguiente código que hace que las urls usen los nombres de los elementos de anclaje como los valores hash (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 Asegúrese 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 seguro para URI (es decir, espacio).

Update2: He "resuelto" el problema en Update1 por ahora, pero tiene la línea terriblemente fea:

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

Dado que la función aparentemente el $ .address.hash (val) agrega un "/ # "después del primer hash, pero si no usamos $ .address.hash (val) luego externalChange se desencadena (por window.location.hash = val)