Tabs

Autor Original:Mike Hall URL ORIGINAL : http://www.brainjar.com/css/tabs/ TÍTULO ORIGINAL : Tabs Traducción al castellano:Pedro Palazón Candel URL CASTELLANO : http://kusor.net/traducciones/brainjar.es/tabs1.es.html

Tabs

Ver la página demo para obtener la versión final del código.

Fijando la Solapa Activa

Para hacer que una solapa sea activa, necesitamos añadir la clase "activeTab" a su elemento link correspondiente. Del mismo modo, para desactivarla, necesitaremos eliminar dicho nombre de clase del link. Ésto se puede hacer dinámicamente utilizando JavaScript.

Para disparar los cambios, vamos a agregar algo de código a las páginas que van a ser cargadas en los iframes.

Cross-Frame Scripting

Para esto, un script en un archivo externo es utilizado. Cada página que vaya a ser cargada en las frames solapadas contendrá la siguiente línea.

<script type="text/javascript" src="tabbed.js"></script>

El fichero "tabbed.js" contiene este código:

if (window.parent && window.parent.synchTab)
window.parent.synchTab(window.name);

Que básicamente dice, "si hay una ventana superior y la página en dicha ventana coniene una función de JavaScript denominada 'synchTab' entonces llámala."

Este código se va a ejecutar cada vez que la página sea cargada. Cuando ésta llame a la función, le pasa el nombre del frame como un argumento.

Activando y Desactivando Solapas

El resto del código está definido en la página principal. La función synchTab() localiza primero el enlace de la solapa que corresponda a la página que va a ser cargada en el frame.

function synchTab(frameName) {

var elList, i;

// Exit if no frame name was given.

if (frameName == null)
return;

// Check all links.

elList = document.getElementsByTagName("A");
for (i = 0; i < elList.length; i++)

// Check if the link's target matches the frame being loaded.

if (elList[i].target == frameName) {

// If the link's URL matches the page being loaded, activate it.
// Otherwise, make sure the tab is deactivated.

if (elList[i].href == window.frames[frameName].location.href) {
elList[i].className += " activeTab";
elList[i].blur();
}
else
removeName(elList[i], "activeTab");
}
}

Ésto lo hace comprobando todos los elementos hipervínculo en la página, buscando sólamente áquellos cuyo destino target apunte al nombre del  frame dado.

Para cada uno de ellos, compara los href de los enlaces con el href de la página cargada en el frame. Si lo encuentra, ese link es convertido en la solapa activa. Si no, lo desactiva.

La activación de un link de una solapa se hace, simplemente, agregando el nombre de clase "activeTab" el elemento. Desactivarlo puede ser un poco más complicado ya que va ha haber más de un nombre de clase asignado al elemento. Por lo que una función denominada removeName() es usada.

Trabajando con Múltiples Nombres de Clases

Cuando múltiples clases de estilo son fijadas en una etiqueta de un elemento via el atributo CLASS, éstos son reflejados en la propiedad className del objeto de dicho elemento. Este valor será una cadena de nombres separados por espacios.

function removeName(el, name) {

var i, curList, newList;

// Remove the given class name from the element's className property.

newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}

La función removeName() crea una matriz de nombres a partir de esta cadena utilizando el método split(). Entonces, dicha función puede buscar en la matriz y comprobar cada nombre, añadiendo cada nombre a una nueva matriz a menos que encuentre áquel que debe ser eliminado.

Esta nueva matriz es convertida entonces en un valor de cadena usando el método join() del objeto array, creando una cadena de nombres separados de nuevo por espacios. Dicho valor de cadena puede ser asignado entonces a la propiedad className del elemento.

Ahora la presentación debería trabajar como se esperaba. Al hacer click en cualquier solapa se cargará la página correspondiente y dicha solapa se convertirá en activa.

Asimismo, puedes utilizar los botones alante y atrás del navegador para moverte atrás o a cualquiera de las páginas de las solapas. Cada vez que se recargen, la solapa apropiada se fijará como activa, manteniendo la presentación sincronizada.

Conclusión

La demo muestra cómo trabaja el código para dos presentaciones de solapas independientes. También demuestra como hacer algunas variaciones sobre los estilos configurados (incluyendo esquinas redondeadas, para navegadores Mozilla/Netscape) y la composición usada en los ejemplos previos.

Puedes intentar hacer algunas variaciones por ti mismo, como colocar las solapas en la parte de abajo de la presentación. O utilizar diferentes colecciones de clases de estilos para diferentes composiciones en la misma página.

En conjunto, este ejemplo debería demostrar la gran versatilidad que puede tener CSS. Combinado con el código de algún script simple, encontrarás que puede proporcionar presentaciones muy dinámicas.

Previo

BrainJar.com · ©1999-2002 by Mike Hall 
Publicado con autorización explícita del autor.
Puedes encontrar más artículos y tutoriales relacionados con dhtml en esta web.