jQuery Tabs y registro en el historial
Es muy común el uso de navegación de tipo tabs para contenidos dentro de una misma página y funcionan bastante bien; el usuario ya está acostumbrado a este tipo de elementos y los utiliza sin problemas, además que resulta liviano y relativamente fácil implementarlos.
Pero recientemente un cliente pidió que los tabs se pudieran navegar con el historial del browser, o sea que si vas seleccionado diferentes tabs e incluso saliendo a otras páginas, puedas volver a ellas con el botón ‘Back’ o ‘Volver’ del navegador, y volver a pasar por ellos. Esto me resultó en un problema no menor que me costó solucionar, ya que los tabs suelen reaccionar ante eventos del click del mouse (como por ejemplo para mostrar tal Primero, crearemos una simple función en jQuery para que funcionen los tabs. Esta es una de las maneras más simples de crear este tipo de menúes. Para el HTML: Le aplicamos la siguiente instrucción en jQuery: Bien, con esto tienes tu menú de tabs funcionando de manera básica pero práctica. Ahora como notarás, al ir por los tabs y volver con el botón del navegador éstos no seguirán el mismo recorrido devuelta, aunque en la URL sí se vea que van cambiando. Para que esto ocurra, debemos comparar no el hash del enlace ( por ej.), sino comparar con la URL que va cambiando. Además se debe incluir el plugin jQuery BBQ, el que realiza el ingreso de la URL con tabs al caché del browser. Con el mismo HTML, miren la nueva función: En este ejemplo, incluso podemos abrir mediante la URL en el tab que queramos, por ejemplo con el siguiente link abriremos el demo en el tab 3:<div class="tabs"><span class="commenthtml"><!-- .tabs --></span>
<ul id="menu_tabs">
<li><a href="#item1">Item 1</a></li>
...
</ul>
<div id="item1" class="caja"><span class="commenthtml"><!-- #item1 --></span>
<h2>Item 1</h2>
<p>Donec gravida posuere arcu.</p>
</div><span class="commenthtml"><!-- /#item1 --></span>
...<br /></div><span class="commenthtml"><!-- /.tabs --></span>$(function(){
<span class="commentjs">// definimos variables para el contenedor y los<div>'s de los tabs</span>
var tabContainers = $('.tabs > div');
<span class="commentjs">// creamos el evento click para cada uno de los items del menu de tabs</span>
$('div.tabs ul a').each(function() {
$(this).click(function(){
<span class="commentjs">// guardamos el ancla (#item1 por ej.) en una variable del link clickeado</span>
var hash = $(this).attr('href');
<span class="commentjs">// escondemos todos los tabs</span>
tabContainers.hide();
<span class="commentjs">// mostramos el <div> que sea igual al ancla guardado</span>
$(hash).show();
<span class="commentjs">// jugamos agregando y quitando classes del menu</span>
$('div.tabs ul a').removeClass('selected');
$('a[href='+hash+']').addClass('selected');
});
});
<span class="commentjs">// para comenzar, hacemos que el primer elemento sea el clickeado</span>
$('div.tabs ul a:first').click();
});
$(function(){
var tabContainers = $('.tabs > div');
<span class="commentjs">// creamos un nuevo evento y lo incluimos al browser</span>
$(window).bind('hashchange', function () {
<span class="commentjs">// nuestra variable no la sacamos del <a> sino de la URL y dejamos el primero seleccionado</span>
var hash = window.location.hash || '#item1';
<span class="commentjs">// el resto es prácticamente lo mismo</span>
tabContainers.hide();
$(hash).show();
$('div.tabs ul a').removeClass('selected');
$('a[href='+hash+']').addClass('selected');
});
<span class="commentjs">// ejecutamos este nuevo evento 'hashchange' mediante un trigger</span>
$(window).trigger('hashchange');
});