Vamos a ver cómo crear un sistema de pestañas o tabs que responda a las acciones del usuario. De modo que, haciendo clic en las distintas pestañas, se muestren dinámicamente los contenidos asociados a los distintos items, en el mismo espacio y sin recargar los contenidos de la página. Es decir, tendremos varias pestañas y un área donde se mostrarán los contenidos relacionados con cada una. Inicialmente se mostrará un contenido de una pestaña y luego, cuando se seleccionen otras, se cambiará el color para mostrar la pestaña activa y se mostrará el contenido asociado a la nueva tab activa.

Quizás lo más fácil es ver el ejemplo en marcha para hacerse una idea exacta de nuestras intenciones.

Este artículo tiene un doble intención:

1.- Por un lado queremos mostrar cómo animar un sistema de pestañas y aplicar la interacción con el usuario, para que el sistema de tabs sea perfectamente funcional y sirva para mantener varios contenidos en un mismo espacio. Todo se debe hacer dinámicamente y respondiendo a las acciones del usuario. En este caso, el artículo sirve de colofón a una serie de artículos en los que venimos creando un sistema de tabs maquetados con CSS.

• Diseño de pestañas con CSS
• Pestañas CSS: mejora de detalles

2.- Por otra parte queremos que este artículo sirva como introducción a nuestro Manual de Mootools y para ello hemos creado la interacción con el usuario de la manera más simple posible y, esperemos, al alcance de cualquier persona que conozca un poco el lenguaje Javascript.

Para facilitar las cosas a las personas que nunca han tenido contacto con Mootools, hemos grabado en vídeo todo el proceso para la creación de este sistema de pestañas, lo que será muy útil para entender estas explicaciones. En el siguente artículo podrás ver el vídeo explicado sobre cómo hacer el ejercicio.

Cambios sobre la maquetación CSS de las pestañas

En los dos artículos mencionados anteriormente hemos explicado los detalles de la creación de las pestañas a partir de listas HTML y estilos CSS. Es por tanto muy conveniente leer el artículo Maquetación de pestañas con CSS

Para aplicar el dinamismo con Javascript sobre esas pestañas hemos hecho un par de cambios en el código HTML y CSS de las pestañas.

Por una parte, hemos creado unas nuevas capas donde se muestran los contenidos que tienen que visualizarse cuando se active cada una de las pestañas. Inicialmente sólo uno de los contenidos asociados a los tab está visible, el que corresponde con la pestaña activa. Los demás los tenemos que ocultar de momento.

Por otra parte se han incorporado unos identificadores (atributos id) en los elementos que queremos dinamizar. Esos identificadores han sido colocados en las etiquetas LI de las pestañas y en las etiquetas DIV de los contenidos asociados a ellas. Serán importantes para acceder a los elementos desde Javascript.

El código HTML quedará de la siguiente manera:

<div id="pestanas">
<ul>
<li id="p1"><a href="javascript: void(0);" onclick="cambiaPestana(0)">DesarrolloWeb.com</a></li>
<li id="p2" class="activa"><a href="javascript: void(0);" onclick="cambiaPestana(1)">CriarWeb.com</a></li>
<li id="p3"><a href="javascript: void(0);" onclick="cambiaPestana(2)">Comunidad</a></li>
<li id="otrapestana"><a href="javascript: void(0);" onclick="cambiaPestana(3)">Otro enlace más largo</a></li>
</ul>
</div>
<div id="contenedorpestanas">
   <div id="cont1" class="nover">Contenido de la pestaña con título DesarrolloWeb.com</div>
   <div id="cont2">Contenido de la segunda pestaña, que tenía el título CriarWeb.com!</div>
   <div id="cont3" class="nover">Otro contenido de la pestaña<br>En este caso el tercer elemento.</div>
   <div id="cont4" class="nover">El contenido de la última pestaña<p>Le creo un párrafo para que se haga un poco mayor!</p></div>
</div>

Podemos haber observado además que los enlaces tienen unos códigos para definir el href y el evento onclick. En seguida los explicaremos.

También podremos observar que dentro del DIV con id="contenedorpestanas" se han colocado los distintos elementos que se van a asociar con cada una de las pestañas. A estos elementos les hemos colocado una clase CSS class="nover" para que inicialmente no estén a la vista. Sólo hemos dejado a la vista (sin el mencionado class="nover") el elemento asociado a la segunda pestaña, que es la que está activa.

La clase "nover" tendrá este código CSS:

.nover{
   display: none;
}

Descargar y enlazar el framework Mootools

Ahora unas notas sobre Mootools, que es una herramienta que permite la programación de aplicaciones web del lado del cliente de una manera sencilla y compatible con todos los navegadores, ya que tiene clases, con sus propiedades y métodos para hacer cualquier cosa que podamos necesitar.

Este ejemplo lo hemos desarrollado con Mootools, por lo que, si no lo tenemos, debemos ir a la página de inicio del Framework para descargarlo: http://mootools.net

Haremos el download del "core" de Mootools, aunque en en vídeo que podrás ver más tarde explicaremos la forma de descargar una versión reducida del "core", dado que nuestro script es tan sencillo que no necesita incorporar todas las características del framework.

Para incluir Mootools en la página tenemos que crear una etiqueta script con la que enlazar con el código del framework:

<script src="mootools-1.2.2-core-reducido.js" type="text/javascript"></script>

Script Javascript que hace uso de Mootools para animar las pestañas

Por último podemos dar paso al script Javascript que vamos a utilizar para crear el dinamismo en las pestañas y la interacción con el usuario.

El dinamismo que tenemos que producir sólo tiene que hacer 1 cosa: estar pendiente de los clic del usuario sobre las pestañas, para mostrar en todo momento como activa la pestaña sobre la que se ha hecho clic y además presentar el contenido asociado a ese tab activo.

Para lo cual, voy a crear una función que se encargue de todo. Deberá recibir de algún modo la pestaña que se debe activar y básicamente hará estas acciones:

1. Quitar la clase "activa" de todas las pestañas (realmente sólo necesitaría quitar la clase "activa" del tab que estaba seleccionado antes de esta llamada a la función, pero como no sé cuál es, pues simplemente quito la clase "activa" de todas las pestañas.
2. Colocar la clase "activa" sobre la pestaña que se ha pulsado y que había recibido por parámetro.
3. Ocultar el contenido asociado a todas las pestañas (aquí, de nuevo, hubiera sido suficiente ocultar el contenido asociado a la pestaña que estaba activa anteriormente, pero como no sé cuál era, pues me vale con ocultar todos los contenidos asociados a las tabs)
4. Mostrar el contenido de la pestaña que se había pulsado.

Eso es todo. Pero para hacerlo antes voy a tener que crear unos arrays con todos los identificadores de las pestañas (etiquetas LI) y los contenidos asociados a éstas (etiquetas DIV que hay dentro del elemento "contenedorpestanas").

var idsPestanas = ["p1", "p2", "p3", "otrapestana"];
var idsContenedores = ["cont1", "cont2", "cont3", "cont4"];

Estos arrays nos servirán para iterar sobre todos los elementos de todas las tabs.

Y ahora podemos ver la función cambiaPestana(), que recibe el índice de la pestaña que ha sido pulsada. Este índice es un número entero que corresponde con el valor de la nueva pestaña que tenemos que poner como activa. Recordemos que los Arrays comienzan por el índice cero, por lo que para activar la primera pestaña se tendrá que enviar a la función el índice de array con valor cero (0) y para activar la última, se debería pasar el índice tres (3), que en este caso corresponde con la cuarta y última pestaña.

function cambiaPestana(id){
   //borro la clase activa de todas las pestañas
   idsPestanas.each(function(item){
      $(item).removeClass("activa");
   });
   //coloco la clase activa a la pestaña que se recibe por parámetro
   $(idsPestanas[id]).addClass("activa");
   //oculto el contenido de todos los contenedores asociados a las pestañas
   idsContenedores.each(function(miItem){
      $(miItem).addClass("nover");
   });
   //en el contenido que está asociado con la pestaña activa, quito la clase nover
   $(idsContenedores[id]).removeClass("nover");
}

El código lo hemos comentado para que se pueda entender mejor. No obstante, utiliza diversas llamadas a métodos de distintas clases Mootools para crear el dinamismo que resultaría imposible explicar si no se conoce el mencionado framework Javascript.

En concreto hace uso del método each() de Native Array, para recorrer todos los elementos de los arrays de identificadores creados anteriormente. También hace uso de la clase Element, para seleccionar elementos con la función dólar y para añadir y quitar clases CSS de los elementos de la página con los métodos addClass() y removeClass().

Por último, debemos realizar las llamadas a esta función, cuando se hace clic sobre los enlaces de las pestañas. Eso lo hemos conseguido con los atributos onclick de los enlaces, en los que hemos escrito la sentencia Javascript para llamar a la función pasando el índice de la pestaña que se debe activar.

onclick="cambiaPestana(0)"
...
onclick="cambiaPestana(3)"

Y sobre los href de los enlaces, decir que se llama a una función void() de Javascript, que no devuelve nada, para que simplemente el enlace no haga nada.

Ya lo tenemos todo, así que os recomendamos acceder al ejemplo en marcha, donde podréis ver también el código fuente completo de este sistema.

Mootools y reutilización del código

Lo que sí quiero remarcar es que este ejemplo está hecho para simplificar las cosas. No está desarrollado como me gustaría, pero al menos es sencillo y funcional. Mootools es un framework totalmente orientado a objetos y, a medida que lo vayamos dominando, experimentaremos que si hacemos todo por medio de clases, podremos reutilizar el código en diversos sitios o en páginas dentro de un mismo web.

Si te ha interesado este ejercicio, sólo me queda recomendarte que sigas el manual de Mootools de DesarrolloWeb.com, para aprender a hacer las cosas bien y a la larga hacerte la vida más cómoda.

Ahora te recomendamos que acompañes las explicaciones y la demostración que puedes ver en el Vídeo de las pestañas dinámicas.