Pestañas dinámicas con CSS y Mootools

  • Por
Sobre cómo crear una interfaz de pestañas dinámicas, maquetadas con CSS y con dinamismo creado con Javascript y Mootools.
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.


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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

gerardo_de_la_rosa

27/6/2009
Errores
Hola que tal, alguien me podria decir donde esta mi problema ya que si accedo al link

http://www.desarrolloweb.com/articulos/ejemplos/mootools/pestanas-dinamicas/pestanas-dinamicas.html

la pagina se ve correctamente y hace los cambios de pestaña, mientras que en modo local no me funciona este es el codigo y me marca "error en la pagina" al intentar cambiar de pestaña:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Pesta&ntilde;as maquetadas con listas y CSS</title>
<script src="mootools-1.2.2-core-reducido.js" type="text/javascript"></script>
<style type="text/css">
#pestanas {
float:left;
width:100%;
line-height:normal;
font-size: 16px;
font-weight: bold;
/*pongo un fondo para toda capa donde están las pestañas*/
background: transparent url(fondo-pestanas.gif) repeat-x bottom;
}
#pestanas ul {
margin:0;
padding:0;
list-style:none;
}
#pestanas li {
float:left;
margin:0 0 0 3px;
padding:0;
background:url("p-der.gif") no-repeat right top;
}
#pestanas a {
display:block;
background:url("p-izq.gif") no-repeat left top;
padding:3px 10px 3px 10px;
color: #fff;
text-decoration: none;
/*definimos un padding para los enlaces de las pestañas*/
padding-bottom: 2px;
}
#pestanas .activa a{
background-image:url("p-izq-activo.gif");
/*colocamos un padding 1 pixel mayor que el padding de los enlaces no activos*/
padding-bottom:3px;
}
#pestanas .activa{
background-image:url("p-der-activo.gif");
}

#contenedorpestanas{
background-color: #ccb355;
padding: 10px;
clear: both;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.nover{
display: none;
}
</style>
<script>
var idsPestanas = ["p1", "p2", "p3", "otrapestana"];
var idsContenedores = ["cont1", "cont2", "cont3", "cont4"];

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");
}
</script>
</head>

<body>

<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&aacute;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>

<br />
<br />
Pesta&ntilde;as CSS por <a href="http://www.desarrolloweb.com/">DesarrolloWeb.com</a>
</body>
</html>

ya cambie el nombre del core como lo indica en el codigo y no funciona, por favor a ver si alguien me puede ayudar.

Saludos y gracias anticipadas

gerardo_de_la_rosa

27/6/2009
Solucionado
Que tal rapidamente, ya solucione el problema, consistia en el js que utilizaba, ya que no contenia "elemnt" y por eso era el error, lo detecte por el tamaño del archivo JS, de cualquier manera muchas gracias.

Saludos

claudio

10/9/2009
Condsulta
Como hago para asignarle una clase activa segun el link?

,me explico cree 3 links ...pero utilizando imagenes ,al texto del link le asigno una clase span con display:none;
y me queda solo la imagen como link,...hasta ahi todo bien pero cuando quiero agregarle una imagen activa segun el link....(en este caso son tres)...no se como asignarle la "variable" para que identifique la id y le agrega la clase correspondiente..


si me ayudan ,muchas gracias.

lore

16/3/2010
consulta
Hola,
gracias por el artículo, es justo lo que estaba buscando, quería hacerte una consulta
¿es posible lincar a una de las pestañas desde otra página?
que desde otra página linque a la segunda pestaña p.e.
gracias

midesweb

16/3/2010
Linkar con otra pestaña
Hola Lore!

El tema de mostrar una pestaña distinta cuando se entra en la página, o que se pueda marcar qué pestaña mostrar, es bastante sencillo, pero necesitas un poco de PHP o de algún otro lenguaje de programación del lado del servidor.

Para empezar puedes enviarle por GET el nombre o número de la pestaña a mostrar:

tupagina.php?numpestana=2

Luego, con PHP transfieres ese número a javascript, con algo como esto

<script>
var ver_pestana = <?php if (!$_GET){ echo "1"; }else{ echo $_GET["numpestana"]; } ?>;
</script>

Ahora que tienes la pestaña que deseas mostrar en la variable ver_pestana, puedes alterar el javascript mootools para que se muestre esa pestaña al principio.

Espero que puedas hacerlo por ti misma el resto... es bastante fácil.

Adrián

01/2/2011
Consulta
Excelente el aporte, muchas gracias. Quería consultarte lo siguiente, yo cree una página con estos tabs con CSS y MOOTOOLS, pero en algunas secciones me gustaría poder usar PHP, por ejemplo para agregar un formulario de contacto, me conviene en ese caso utilizar un iframe? Cabe aclarar que soy principiante del diseño web. Muchas gracias

luis

10/2/2011
pestaña dinamica
Hola.
alguién me puede ayudar a crear unas pestañas dinamicas cuyo contenido solo se cargue al pinchar sobre la pestaña, uso AJAX para cargar el contenido con el onclick?
gracias.

Lisette

19/5/2016
No encuentro Mootools
Hola, ya hice todo el tutorial pero hasta al último me di cuenta que ya no está la versión de mootols que utilizaste y las nuevas no me funcionan. ¿Me puedes ayudar?