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.