Sistema de pestañas... y accesible

Los sistemas de pestañas pueden estar implementados de manera que cada vez que se seleccione una pestaña se abra una nueva página, o que todo el contenido esté en la misma página y las pestañas sirvan para mostrar los datos requeridos y ocultar el resto modificando los estilos de los elementos implicados.

Simularemos los clásicos archivadores de carpetas colgantes.

icono Introducción
icono HTML
icono CSS
icono javascript
icono Generar código
Introducción

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

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

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

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

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

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".

navegando

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

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).

generador

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:

Generación
Código
Edición


Comentarios

Nombre: Manuel
Procedencia: Barcelona
E-Mail: manelgomez@ya.com
Fecha de envío: 16 de septiembre de 2012, a las 23:04.
comentario:

Hola Caricatos:

Creo que algun foro te he visto. Estoy liado con las pestañas, y por tus explicaciones tienes que tener muy buenos conocimientos.

Estudiando los buenos ejemplos aprentes mucho, eso por eso que te pido si tienes algun ejemplo para poder aprender y desarrollar uno a mi gusto, despues de haber adquirido el mecanismo.

Gracias


Un Saludo.


Nombre: Diego
Procedencia: Colombia
E-Mail: diegojimenez6630@hotmail.com
Fecha de envío: 29 de marzo de 2012, a las 15:08.
comentario:

Eso es precisamente lo que estaba buscando en realidad lo necesito agradezco si me lo puedes enviar. De antemano muchas gracias


Nombre: Héctor
Procedencia: Argentina
E-Mail: guasonhen@gmail.com
Fecha de envío: 5 de diciembre de 2011, a las 04:13.
comentario:

emoticón muy bueno loco medio vueltero, pero ya lo modificare a mi gusto emoticón


Nombre: usermaster
Procedencia: Colombia
Fecha de envío: 5 de septiembre de 2011, a las 17:11.
Valoración:
comentario:

El código está completo, lo único es que con la información de cada pestaña se deben armar los archivo, en el caso del archivo pesta.js se copia todo el código que se encuentra en la pestaña javascript, en el caso de pesta.css, se copia todo el código de la pestaña css y para el código html, se toma el código generado en la pestaña generar.


Nombre: Erik Gaona
Procedencia: ENCRyM
Fecha de envío: 26 de julio de 2011, a las 20:43.
Valoración:
comentario:

Oye estoy haciendo un proyecto en php y necesito que tenga pestañas. Me podrias mandar el código completo por fa???


Nombre: randall badilla
Procedencia: Costa Rica
E-Mail: zurikatarage@yahoo.com
Fecha de envío: 26 de julio de 2011, a las 12:32.
Valoración:
comentario:

Excelente necesito este codigo, me cae genial a lo ke estoy haciendo, podrias enviarmelo completo por favor?


Nombre: Jenny chang
Procedencia: venezuela
E-Mail: jny1988@hotmail.com
Fecha de envío: 8 de junio de 2011, a las 06:24.
Valoración:
comentario:

excelente, lo que necesito emoticón me puedes enviar el codigo completo por favor emoticón


Nombre: Sheryl
Procedencia: Venezuela
E-Mail: sheryl.ravelo@gmail.com
Fecha de envío: 15 de abril de 2011, a las 03:25.
Valoración:
comentario:

Definitivamente necesito este código completo :( estoy peleando para crear pestañas como estas. Gracias!!


Fecha de envío: 4 de abril de 2011, a las 18:44.
comentario:

excelente, necesito este codigo


Nombre: Luis
Procedencia: España
E-Mail: informatica@virtualmain.com
URL: http://www.virtualmain.com
Fecha de envío: 25 de enero de 2011, a las 16:28.
Valoración:
comentario:

Hola,

Me gustaria tener el código completo del ejemplo con pestañas, incluso con visor.php ya que tengo que realizar una aplicación y me gustaría poner pestañas para crear un usuario con datos personales, profesionales, formación, etc


Nombre: diego
Procedencia: mexico
E-Mail: d2a9b@yahoo.com.mx
Fecha de envío: 30 de enero de 2009, a las 02:49.
comentario:

Excelente necesito esta aplicacion


Colabore enviando su comentario

Nombre
Procedencia
Página web
E-mail *
Evaluación evaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluarevaluar
Código de envío

Rellene este campo con la clave de la imagen: codigo de envío

Nota Importante

El campo E-Mail es obligatorio para activar por correo electrónico el comentario (si no desea que se haga público, marque la casilla "anonimato"). También es obligatorio el código "captcha" (el número que se ve en la imagen adjunta); y por supuesto, debe existir un comentario.

Puede encontrar información sobre este sistema de comentarios en este enlace: Ponga comentarios en su web.

Edición negrita cursiva subrayado   alineación izquierda alineación derecha alineación centrada alineación justificada   Insertar enlace insertar imagen   Emoticones: [:)] [:(] [:x] [BIEN] [MAL] [SI] [NO] [APLAUSOS] [MEJORABLE] [¡A VER!] [¡DÉJAME PENSAR!] [FLIPE] [¡SIN PALABRAS!]
Copyright © 2006-2018 www.caricatos.net
Visitas: 21421