Poner el contenido en diferentes solapas

JMiur [E]

Como el espacio disponible en una página web es relativamente limitado y en Blogger no tenemos la posibilidad de insertar páginas especiales, una práctica más o menos generalizada es ocultar determinada información y hacerla visible cuando hacemos click en algún botón.

Por lo general, esto hace que el contenido se desplace hacia arriba o hacia abajo, expandiendo y contrayendo un bloque cualquiera. Para esto hay varias técnicas, alguna son sencillas, otras más complicadas.

Utilizando ese mismo criterio y librerías externas, hay métodos más sofisticados como la creación de las llamadas tabs o solapas es decir, una serie de bloques superpuestos, cada uno de ellos con un contenido diferente y del que sólo vemos uno a la vez.

Desde ya, hay que decir que esto no aliviará la carga de la página, los datos están allí, no los vemos porque los marcamos como ocultos y justamente eso es lo que permite que pasar de una solapa a otra sea un proceso rápido.

idTabs es una opción que funciona con el framework jQuery. Su uso es bastante sencillo, descargamos el script, lo alojamos en un servidor e insertamos el código en el encabezado de la plantilla, antes de </head>:

<script type="text/javascript" src="URL_jquery.idTabs.pack.js></script>

Luego, cualquier enlace de tipo <a href="#nombre"> que esté dentro de un elemento que tenga como atributo class="idTabs", será tratado como una solapa:

<ul class="idTabs">
<li><a href="#solapa_1">ENLACE</a></li>
<li><a href="#solapa_2">ENLACE</a></li>
</ul>
<div id="solapa_1">el contenido de la primera solapa</div>
<div id="solapa_2">el contenido de la segunda solapa</div>

Hay otras opciones; por ejemplo, los desarrolladores de Prototype han creado un pequeño script que puede agregarse a su librería. Como en el caso anterior, descargamos Control.Tabs y lo agregamos a la plantilla. Si ya usamos prototype, basta poner:

<script type="text/javascript" src="URL_control.tabs.2.1.1.js></script>

Sino, colocamos ambos:

<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_control.tabs.2.1.1.js"></script>

El código HTML es similar al primer ejemplo:

<ul id="nombre">
<li><a href="#solapa_1">ENLACE</a></li>
<li><a href="#solapa_2">ENLACE</a></li>
</ul>
<div id="solapa_1">el contenido de la primera solapa</div>
<div id="solapa_2">el contenido de la segunda solapa</div>
<script>
new Control.Tabs('nombre');
</script>

Claro que aún hay otro mucho más sofisticados pero, en lo personal, el que más me ha gustado es Fabtabulous que también usa Prototype. Su ventaja es que es muy sencillo y todo el diseño de las solapas lo hacemos con CSS.

Si ya usamos Prototype, sólo necesitamos fabtabulous.js. Lo alojamos en un servidor y lo agregamos, como siempre, en algún lugar antes de </head> o, eventualmente, al final de la plantilla, justo antes de </body>:

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

El código HTML es simple. Utilizamos una lista (UL) para colocar los enlaces de las solapas y le agregamos el atributo id="tabs". En cada item de la lista (LI), colocamos un enlace a las solapas y, a la primera, esa que aparecerá visible por defecto, le agregamos la clase class="active-tab":

<ul id="tabs">
<li><a href="#solapa_1" class="active-tab">ENLACE 1</a></li>
<li><a href="#solapa_2">ENLACE 2</a></li>
  <li><a href="#solapa_3">ENLACE 3</a></li>
  <li><a href="#solapa_4">ENLACE 4</a></li>
</ul>

Debajo, lo mejor es crear un bloque general y dentro este, cada una de las solapas a las que conviene establecerles una clase CSS. Como en el código anterior, a la primera le adosamos una clase especial llamada active-tab-body para diferenciarlas del resto:

<div class="demoTabs">
<div id="solapa_1" class="demoSolapa active-tab-body">el contenido</div>
<div id="solapa_2" class="demoSolapa">el contenido</div>
<div id="solapa_3" class="demoSolapa">el contenido</div>
<div id="solapa_4" class="demoSolapa">el contenido</div>
</div>

Si colocamos esto en la sidebar o incluso en un post, no veremos otra cosa más que una lista común y corriente. La clave es definir las propiedades CSS de esos elementos y clases. Lo hacemos agregando el estilo en la plantilla, por ejemplo, a continuación del script.

Este es el esquema general del ejemplo:

<style type="text/css">

#tabs { /* quitamos las propiedades por defecto de las listas */
height: 32px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}

#tabs li { /* mostramos los items uno al lado del otro */
float: left;
}

#tabs a { /* diseño gráfico de los enlaces */
background-color: #101921;
border:1px solid #FAEBD7;
color: #777777;
float: left;
margin: 0 0 0 3px;
padding: 5px 10px;
text-decoration: none;
}

#tabs a.active-tab { /* un diseño diferenciado para la solapa activa */
background-color:#A52A2A;
border:1px solid #FAEBD7;
color:#FFFFFF;
}

.demoTabs { /* propiedades comunes al contenido de todas las solapas */
color: #F2F2F2;
}

.demoSolapa { /* por defecto, todo el contenido está oculto */
background-color: #362C18;
clear: both;
display: none;
height:125px;
padding: 10px;
}
.demoSolapa.active-tab-body { /* excepto la primera */
display: block;
}

</style>

Por supuesto, puede usarse cualquier tipo de diseño, usar imágenes como fondos, etc. En cuanto al contenido, no parece haber demasiadas restricciones y tampoco hay limitaciones en cuanto a la cantidad de solapas.