♡ 79 ☆ Tabs, menú de contenidos con pestañas. Versión jQuery

Compartir en Facebook Compartir en G+ Compartir en Twitter Votar en Bitacoras Mover en DivoBlogger Haz Pin Enviar entrada por correo Imprimir artículo

Hay diversos scripts que facilitan la creación de cajas con pestañas, esas que nos permiten mostrar de manera alternativa una serie de contenidos dentro de un mismo espacio.

Por otra parte muchos usamos jQuery -otra librería JavaScript- teniéndola incluida entre las que carga nuestra plantilla.

Cómo alguna vez me había hecho falta un sistema de estos, también llamados tabs (lengüeta, tabulación) y algunos lectores habían preguntado por ellos, pensé que tenía que haber alguna manera de aprovechar jQuery para hacer lo mismo y así ahorrarnos añadir otra librería adicional a la ya de por sí pesada plantilla Blogger.

Y claro que la hay. Sólo es cuestión de utilizar algunas instrucciones como hide o show, autoexplicativas en su lengua nativa, una manera de añadir o quitar clases a los elementos de lista activos y por último, agregar un efecto fade para redondear la faena.

---

El primer paso es incluir el código JavaScript antes de </head>. La primera línea que es la que carga jQuery es prescindible si ya la tenemos en nuestra plantilla.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".contenido_tab").hide(); //Ocultar capas
$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña

// Sucesos al hacer click en una pestaña
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"
$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada
$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña
var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa
$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo
return false;
});
});
</script>

El segundo es simplemente crear unas capas con los distintos contenidos a los que se les debe incorporar una serie de ID distintos, precedidos de una lista de enlaces cuyo destino son esos mismos ID. Los contenidos irán a su vez dentro de una única capa contenedora y cada elemento irá con clases añadidas para poder controlar el elemento activo y también para poder darle estilo.

Lo podremos poner en un gadget o en una entrada y esta sería su estructura:

<ul class="tabs">
<li><a href="#tab1">Opción 1</a></li>
<li><a href="#tab2">Opción 2</a></li>
<li><a href="#tab3">Opción 3</a></li>
</ul>
<div class="contenedor_tab">
<div id="tab1" class="contenido_tab">
CONTENIDO 1
</div>
<div id="tab2" class="contenido_tab">
CONTENIDO2
</div>
<div id="tab3" class="contenido_tab">
CONTENIDO3
</div>
</div>
<div style="clear:both;">
</div>

Y esto será lo que veremos antes de formatear todo, una lista de enlaces y a continuación una frase (el contenido de la primera capa), que irá cambiando según pinchemos en un enlace u otro. Probando que es gerundio.

• Opción 1
• Opción 2
• Opción 3

El CONTENIDO 1

Y este es el CONTENIDO 2

Por último, el CONTENIDO 3

---

Para tener una cosa algo más decente, ya sólo resta dar estilo a las clases que hemos usado. Este sería un ejemplo de CSS que en Blogger, como es habitual, habría que insertar entre las etiquetas SKIN:

/* CSS Tabs jQuery */
.contenedor_tab{float:left;clear:both;width:600px;padding:0px;margin:0 auto;display:block;background:#ccc;border:1px solid #333;-moz-border-radius:0 0 7px 7px;-webkit-border-radius:0 0 7pc 7px;border-radius: 0 0 7px 7px;}
ul.tabs{float:left;margin:0;padding:0;list-style:none;height:32px;width:600px;margin-top:-7px;}
ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;border:1px solid #333;margin-bottom:-1px;background:#333;overflow:hidden;position:relative;border:1px solid #333;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;}
ul.tabs li a{text-decoration:none;color:#fff;display:block;font-size:13px;padding:0 20px;border:1px solid #fff;outline:none;-moz-border-radius:7px 7px 0 0;-webkit-border-radius:7px 7px 0 0;border-radius: 7px 7px 0 0;}
ul.tabs li a:hover{background:#666;}
ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {color:#333;font-weight:bold;background:#ccc;border-bottom:1px solid #ccc;}
.contenido_tab{padding:10px;font-size:1.2em;width:580px;}
.contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px}

¿Vemos ahora cómo quedaría definitivamente?

• Opción 1
• Opción 2
• Opción 3

Los marcadores usados en el enlace de cada elemento de lista, tienen que ser idénticos a los correspondientes ID con los que identifiquemos cada capa con contenido.

En este ejemplo la primera pestaña tiene id="tab1" y por tanto el enlace de la primera capa será hacia #tab1. Esta primera capa será inicialmente visible.

La pestaña 2, en este ejemplo con una imagen.

Dentro de cada capa podemos meter cualquier contenido...

Actualizamos para detallar la utilidad de cada clase.

• .contenedor_tab: Contenedor general de la caja de pestañas
• ul.tabs: Propiedades generales de la lista que formarán los contenidos
• ul.tabs li: Cada una de las pestañas seleccionables (Opción1, etc.)
• ul.tabs li a: Aspecto en estado normal de las pestañas
• ul.tabs li a:hover: Aspecto hover de las pestañas
• ul.tabs li.activa: Aspecto de la pestaña activa
• .contenido_tab: Formato para el contenido
• .contenido_tab img: Propiedades para imágenes dentro de contenido

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo ?