jquery-ui - tablist - pestañas jquery ui

Cambiar el hash pero no mover la página usando las pestañas jquery ui

Question

Agregué el siguiente código para cambiar el hash al nombre de la pestaña:

$("#tabs > ul").tabs({ 
select: function(event, ui){ 
window.location.hash = ui.tab.hash; 
} 
} );

Esto funciona bien en FF3, pero en IE7 se mueve hacia abajo en la página (dependiendo de la pestaña seleccionada desde cualquier lugar cerca de la parte superior de la página hasta el final de la página).

Traté de cambiarlo a:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})

Esto conduce a un comportamiento idéntico en IE7 y FF3, que mueve la página hacia abajo a la parte superior de la pestaña seleccionada.

Me gustaría que se cambiara la pestaña, se actualizara el hash, pero la página no se moviera para nada, que es como funciona en FF3 en mi primer ejemplo, pero no en IE7.

Gracias.

Notas: JQuery 1.3.1 / JQuery-UI 1.6rc6

Answer 1

Podría intentar tener un "retorno falso"; después de configurar la ubicación de la ventana, pero no estoy seguro.

Desafortunadamente, tus problemas no terminarán ahí. Existen otros problemas con la navegación hacia adelante y hacia atrás en múltiples navegadores: nada puede cambiar, la página puede volver a cargarse, el estado de la página puede verse alterado, el javascript puede reinicializarse, etc.

Es posible que desee echar un vistazo a las pestañas v2 que utiliza el plugin Historial / Remoto aunque no se haya actualizado para jQuery 1.3+.

Esta demostración es más fácil de entender. Si observa la fuente de JavaScript, notará el uso de iframes para manejar estados.

También existe el plugin Event de History y el plugin jHistory para lograr lo que desea.

Me gustaría saber cómo terminaron las cosas y qué solución fue.

Answer 2

Si hay un elemento en la página que tiene la misma ID a la que está configurando el hash, por ejemplo, si intentas configurar el hash del navegador en #cars y ya hay un div # cars en la página, el navegador desplazarte hacia abajo hasta donde está ese div.

Que yo sepa, hay 3 posibles soluciones

1) Cambie el hash del navegador a algo más como #thecars.

2) Cambie su marcado existente de alguna manera similar.

3) En algún caso, cambiar el ID de tu marcado con el mismo nombre, luego cambiar el hash del navegador y volver a cambiar el nombre del marcado por su valor original también debería funcionar teóricamente. Esto es obviamente una solución lenta y mala, solo pensé en mencionarlo.

Answer 3

Lo que Chris sugirió que funcionó para mí, no tenía ni idea de que un div pudiera vincularse a través del #. Así que mi solución es bastante simple, en el show: controlador de eventos, hago lo siguiente, no es perfecto porque el botón de retroceso no estará en la historia, pero ese es otro trabajo para el complemento de historial de barbacoa. Todos mis divs simplemente tienen id = "tab-cars", id = "tab-trucks" ... quitan la parte ''tab-'' y la colocan en el hash url.

var name = ui.panel.id.substr(4);
location.hash = ''#''+name;