Introducción
HTML
CSS
javascript
Generar código
Introducción
En este sistema de pestañas, al elegir un item determinado, sencillamente se realizan dos acciones: resaltar el término con el mismo color de fondo de los contenidos, cambiándo el color de los items no seleccionados, y mostrar la capa asociada, ocultando el resto. También se ha implementado el sistema de manera que pueda simular un archivador de carpetas colgantes de colores.
Como efecto complementario se elimina el borde inferior de la pestaña para obtener el efecto deseado.
Puede verse en esta página que hemos añadido una pequeña imagen en la pestaña, que en grande se puede ver en el contenido, pero ese tipo de detalle lo dejaremos a cargo del webmaster.
HTML
El sistema se basa en las listas (definición de lista: etiqueta <dl>), donde las propias pestañas son términos definidos: <dt>, y los contenidos descripciones de las definiciones: <dd>. Aunque el uso de estos elementos es debido a la semántica de las pestañas, pueden usarse otros elementos como por ejemplo elementos div como contenedor general y carpetas; y para las pestañas podríamos usar cualquier elemento inline como los elementos span, o incluso los propios enlaces (elementos <a>).
Para conseguir la accesibilidad en el sistema utilizaremos anclajes dirigidos a cada capa, anulándolos luego con javascript, de manera que la página sea navegable y accesible.
podemos insertar sendas etiquetas noscript informativas y/o enlazando al principio de la página (usando anclajes: href="#").
CSS
La definición de los estilos del sistema de pestañas, simplemente será hacer coincidir el color de la pestaña activa con el correspondiente contenido, eliminando el borde inferior de la mencionada pestaña activa.
La otra característica a considerar es que las pestañas deben estar en la misma línea, además debemos considerar su aspecto. No veremos las pestañas con las esquinas redondeadas, ya que es un efecto que se logra con imágenes o con otros trucos que no nos detendremos a analizar.
Javascript
El código javascript que llamaremos "mostrarPestaña(sistema, cual)" en principio debe constar en recorrer las pestañas, activando la seleccionada y desactivando el resto.
Para conseguir un sistema accesible, debemos tener todos los datos visibles y con el evento de carga de la página (load) acomodaremos los elementos, además, cada pestaña será un enlace interno hacia los contenidos asociados a ella, y a la vez se incluirá el método principal de esre sistema, cancelando el enlace con javascript, ya que es innecesario incrementar el historial del navegador.
Generar código
Para facilitar el uso de este sistema de pestañas, añadimos un generador del esquema, con las etiquetas, estilos y código listo para agregar en él el contenido deseado.
Se recomienda probar el código en los distintos navegadores.
HTML
Como hemos comentado en la pestaña Introducción, el sistema está basado en listas (etiqueta "dl"), donde las pestañas son elementos "dt", y las carpetas elementos "dd", pero como se puede ver en el código de las pestañas "coloreadas" (véase en pestaña "Generar código"), también pueden usarse elementos inline para las pestañas, y de bloque para las carpetas.
Mostramos a continuación la implementación de la pestaña "Introducción":
<dt id="Tintro" class="pestaña on" > <!--img src="../dibujos/minitintero.gif" alt="icono" class="icono" /--> <a id="_intro" href="#intro" onclick="mostrarPestaña(pestañas, this); return false"> Introducción </a> <dt>
Para quienes no quieran definir eventos (con javascript) en las mismas etiquetas, pueden eliminar la definición en el manejador de eventos onclick de la etiqueta "a", pero la inicialización debe hacerla usando window["inicializaPestañas"] (véase apartado javascript).
Sobre las carpetas en sí (véase la definición css de ".carpeta") son etiquetas contenedoras (bloque), tan solo debemos preocuparnos de que tenga definido el atributo class: class="carpeta".
CSS
Con respecto a los estilos de un sistema de pestañas, básicamente debemos tener ocultos los contenidos asociados a las pestañas inactivas, a la vez que las pestañas en sí deben ubicarse en la misma línea (display: inline), y preferentemente debemos usar el mismo color que los contenidos asociados.
En esta página, hemos usado los siguientes estilos:
/****************************************
* Estilos de las pestañas *
****************************************/
.carpeta {/* contenidos de las carpetas */
border : 1px solid gray;
position : relative;
top: 8px ;
padding-top : 1em;
z-index : 0;
}
.pestaña {/* pestañas */
display : inline;
margin : 3px 1px;
padding : 4px;
border : 2px outset gray;
position : relative;
top : 6px;
}
.pestaña a {/* enlace de la pestaña */
color : black;
border : 0;
}
Puede verse que no se definen los colores para los fondos tanto de las pestañas como de las carpetas asociadas, ya que dependiendo del tipo de sistema que implementemos, estos colores pueden variar si la carpeta asociada está activa o no.
A continuación vemos los estilos asociados a los sistemas normales como los de esta propia página, y a continuación los de sistemas de colores:
/****************************************************************
* Estilos discriminados de las pestañas normales *
****************************************************************/
#intro, #html, #css, #javascript, #generador, #normal_1, #normal_2, #normal_3 {
background-color: #eeeeee;
}
.on {
background-color: #eeeeee;
border-style: inset;
border-bottom: 0;
z-index: 100;
}
.off {
background-color: #cccccc;
z-index: 0;
}
/****************************************************************
* Estilos discriminados de las pestañas coloreadas *
****************************************************************/
#color_1, #Pcolor_1 {
background-color: yellow;
}
#color_2, #Pcolor_2 {
background-color: lime;
}
#color_3, #Pcolor_3 {
background-color: pink;
}
.si {
border-style: inset;
border-bottom: 0;
z-index: 100;
}
.no {
z-index: 0;
}
Con estas definiciones, basta con declarar el atributo class de cada pestaña así: class="pestaña on" para pestañas normales, y class="pestaña si" en un sistema de colores. Cambiando el "on" por "off" y el "si" por "no" para indicar que no está activa.
javascript
Debemos saber que tipo de pestañas queremos, ya sea como la de esta misma página, o las que simulan carpetas de colores (véase la pestaña "Generar código").
Sobre la accesibilidad del código, debemos cargar la página tanto con las carpetas visibles, y en las pestañas un sistema de enlaces con anclas, que se cancelan para no rellenar inútilmente el historial de navegación. Debemos crear un objeto de este tipo:
window["pestañas"] = {
on : "on",
off : "off",
items :["intro", "html", "css", "javascript", "generador"]
}
Y con el evento load, seleccionamos la primera de las pestañas. En esta página la pestaña "Introducción".
window.onload = function() {
mostrarPestaña(pestañas, tag("_intro"));
}
El código de selección de las pestañas es el que se ve a continuación, donde también hemos añadido un alias para la selección de tags, y otro de cancelación que se usa en los enlaces.
/* Alias para document.getElementById */
function tag(id) {return document.getElementById(id);}
/* Alias para document.createElement */
function crear(t) {return document.createElement(t);}
/* Alias para document.createTextNode */
function texto(cual) {return document.createTextNode(cual);}
/* Alias para la instrucción de cancelación: return false; */
function cancelar() {return false;}
/************************************************************************
* Selección de pestañas declaradas inline *
************************************************************************/
window["mostrarPestaña"] = function(sistema, cual) {
soy = cual.id;
contenido = soy.substr(1);
for (var i = 0, total = sistema.items.length; i < total; i ++)
tag(sistema.items[i]).style.display = (sistema.items[i] == contenido) ? "block" : "none";
for (i = 0, todos = sistema.items, total = todos.length; i < total; i ++)
tag("P" + todos[i]).className = "pestaña " + sistema.off;
tag("P" + contenido).className = "pestaña " + sistema.on;
}
/************************************************************************
* Selección de pestañas: asignación onload *
************************************************************************/
window["mostrar_Pestaña"] = function(e) {
yo = (e) ? e.target : event.srcElement;
soy = yo.id;
//alert(soy);
sistema = window[yo.parentNode.parentNode.id];
contenido = soy.substr(1);
for (var i = 0, total = sistema.items.length; i < total; i ++)
tag(sistema.items[i]).style.display = (sistema.items[i] == contenido) ? "block" : "none";
for (i = 0, todos = sistema.items, total = todos.length; i < total; i ++)
tag("P" + todos[i]).className = "pestaña " + sistema.off;
tag("P" + contenido).className = "pestaña " + sistema.on;
}
/************************************************************************
* Inicialización "onload" del sistema de pestañas *
************************************************************************/
window["inicializaPestañas"] = function (sistema, inicial) {
for (i = 0, datos = sistema.items, total = datos.length; i < total; i ++) {
with (tag("P" + datos[i])) {
className = "pestaña " + ((datos[i] == inicial) ? sistema.on : sistema.off);
onclick = mostrar_Pestaña;
}
tag(datos[i]).style.display = (datos[i] == inicial) ? "block" : "none";
tag("_" + datos[i]).onclick = cancelar;
}
}
Nótese como se asignan los estilos a las pestañas (on, off).
Generar código
Primero debemos decidirnos sobre el tipo de pestañas que queremos usar, el tipo "normal" es el que se ve en esta misma página, y como alternativa veremos un sistema de pestañas de diferentes colores.
- item normal 1
- item normal 2
- item normal 3
-
contenido item normal 1
Aquí pondremos el contenido de la pestaña "item normal 1"...
-
contenido item normal 2
Aquí pondremos el contenido de la pestaña "item normal 2"...
-
contenido item normal 3
Aquí pondremos el contenido de la pestaña "item normal 3"...
... y como alternativa veremos un sistema de pestañas de diferentes colores.
contenido item color 1
Aquí pondremos el contenido de la pestaña "item color 1"...
contenido item color 2
Aquí pondremos el contenido de la pestaña "item color 2"...
contenido item color 3
Aquí pondremos el contenido de la pestaña "item color 3"...
Podemos modificar el número de pertañas y sus títulos con los controles siguientes: