En este tutorial se muestra la manera de hacer fichas ( Slick Tabbed ) similares a las que se pueden hacer con Dreamweaver y la librería Spry. En este caso la librería que utilizaremos en primer lugar será JQuery, pero lo importante es comprender la manera en que está construido este fichero y cómo utiliza tanto los elementos de Estilos CSS como los scripts que permiten su ejecución.
Este es el resultado final:
Olvídate de MíFicha Técnica
- Título OriginalEternal Sunshine of the Spotless Mind
- Año2004
- PaísU.S.A.
- DirectorMichel Gondry
- RepartoJim Carrey, Kate Winslet
- Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relación. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasión inicial. (FILMAFFINITY)
Lo que viene a continuación es una interpretación del excelente tutorial en inglés que encontré en la página de nettut+, y esta vez voy evitar la técnica de resumen que caracteriza a este blog por respeto a la meticulosidad y paciencia que nos ha ofrecido su autor. Por supuesto, he procurado aportar algo yo también.
Aquí puedes ver el Ejemplo de NetTut+ en acción.
Paso 1: crear una apariencia adecuada para las fichas
He descargado el psd del ejemplo para practicar, pero luego he creado una apariencia diferente en Photoshop. Aunque, como podrán comprobar, la mayor parte del formato se consigue con los colores de fondo.
Paso 2: crear la estructura del fichero
1) Crear un div contenedor, lo que nos facilitará su manipulación.
2) Crear el encabezado, probablemente con una etiqueta de título (h)
3) Debajo hay que crear otro div que contenga todas las pestañas y el contenido. Será la que tenga el fondo gris oscuro (en el original).
4) Los siguiente será un div que contenga una lista desordenada en la que cada elemento (li) será una pestaña y sus enlaces <a> nos permitirán configurar su apariencia, darles comportamiento de rollovers y cambiar su estado a on/off.
5) Finalmente crearemos div en los que estará el contenido de cada pestaña, y lo mostraremos u ocultaremos dependiendo de qué pestaña esté activa. Todo quedaría de la siguiente manera:
¡Importante! Si no vez el código, recarga la página.
<div>
<h4>Heading</h4>
<div>
<ul>
<li><A>Pestaña</A></li>
<li><A>Pestaña</A></li>
<li><A>Pestaña</A></li>
</ul>
<div>Contenido Tab 1</div>
<div>Contenido Tab 2</div>
<div>Contenido Tab 3</div>
</div>
Paso 3: crear el fondo en Photoshop
Yo he utilizado una superposición de motivo: polvo azul ( 128 x 128 ). También he creado dos degradados, uno para los enlaces y otro para el fondo de la ficha, lo que crea un bonito efecto de sombra.
Paso 4: crear los ficheros fichas.html y estilos.css
fichas.html
La estructura del fichero html quedaría como sigue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ejemplo de fichas - Simple</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="screen" />
</head>
<body>
<div id="tabbed_box_1" class="tabbed_box">
<h4>Olvídate de mí<small>Ficha técnica</small></h4>
<div class="tabbed_area">
<ul class="tabs">
<li><a href="" id="tab_1" class="active">Fichas</a></li>
<li><a href="" id="tab_2">Sinopsis</a></li>
<li><a href="" id="tab_3">Trailer</a></li>
</ul>
<div id="content_1" class="content">Contenido de la Ficha 1</div>
<div id="content_2" class="content">Contenido de la Ficha 2</div>
<div id="content_3" class="content">Contenido de la Ficha 3</div>
</div>
</div>
</body>
</html>
Estos son algunos aspectos a destacar sobre la estructura del código:
- El título se ha colocado en un elemento <small> cuyo contenido de texto siempre será inferior en una unidad al tamaño del elemento que lo precede. Para un texto normal, equivaldría a <Font size = “-1”>
- Se le ha dado un id a los div para poder utilizarlos en la página.
- Se le ha dado una clase al elemento <ul>.
estilos.css
Estos son algunos de los aspectos a tener en cuenta para los estilos.
Hay que insistir que el método de ir dando los estilos de afuera hacia adentro se debe a la forma en que funcionan las Hojas de Estilo en Cascada, es decir, nos aseguramos que cualquier estilo de los elementos interiores se sobrescriba y no a la inversa.
Estilos del Título- Centraremos el div contenedor #tabbed_box dándole un ancho determinado y asignando a los márgenes izquierdo y derecho la propiedad: auto.
- Se ha dado estilo a la etiqueta h4 como parte de un div (.tabbed_box h4) y no directamente, teniendo en cuenta que puede cambiar en página grandes. Se ha establecido su margen de fondo en 10 pix. Hay que tener en cuenta que muchos elementos tienen valores predeterminados y en el caso de la etiqueta h4 el margen de fondo es mayor que el que deseamos, por ello hay que especificarlo.
- Se le ha dado una posición relativa al elemento <small> para poder posicionarlo un poco más a la derecha y arriba. Su espacio entre letras se ha tenido que redefinir a 0, pues en caso contrario heredaria el espaciado -1 de la etiqueta h4.
- Para los elementos de la lista desordenada, quitamos todos los paddings y margins otorgándoles un valor de cero. La propiedad ‘inline’ los mantendrá a todos dispuestos en la misma línea y no cada uno en una lína diferente, como correspondería a la forma predeterminada de display: block. También se eliminan los iconos que de manera predeterminada llevan todas las listas desordenadas.
- Se han creado los estilos para los estados de: reposo, sobre y activo.
- En este paso se le dice a todos los elementos con la clase contenido que deben tener un fondo blanco, y se hacen invisibles los elementos que no están activos.
Nota.
Mas tarde, con el uso de JavaScript se alternarán los estados visible y oculto de estos elementos con las propiedades display: block y display:none.
Otros estilos a destacar- Para eliminar el borde sobrante en la parte inferior, se ha utilizando un pseudo-selector denominado last-clild ( último elemento hijo ).
Código JavaScript
( sin JQuery )
- En primer lugar hay que crear un archivo javascrip con la función o funciones que permitirán ejecutar las acciones de ocultar y mostrar el contenido.
- Crear un enlace a este archivo en la cabecera del archivo html.
- Agregar código javascript en cada uno de los tres enlaces contenidos en los elementos li de la siguiente manera:
La función javascript que utilizamos es la siguiente:
function tabSwitch_2(active, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+active).style.display = 'block';
document.getElementById(tab_prefix+active).className = 'active';
}
En esta función se asume que tenemos un juego de pestañas y su correspondiente contenido con un prefijo que será: tab_1, tab_2 … and content_1, content_2 …
El primer argumento de la función: active, hace referencia al elemento activo que debe mostrarse. El segundo argumento: number, se refiere al número de pestañas que están siendo usadas. Y el tercer y cuarto argumentos se refieren a los prefijos usados en los Ids de nuestros elementos del dom.
– Eso significa que si queremos que haya dos ficheros, sólo tendremos que cambiar los prefijos y podremos usar la misma función todas las veces que queramos.
<ul class="tabs">
<li><a href="javascript:tabSwitch_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Fichas</a></li>
<li><a href="javascript:tabSwitch_2(2, 3, 'tab_', 'content_');" id="tab_2">Sinopsis</a></li>
<li><a href="javascript:tabSwitch_2(3, 3, 'tab_', 'content_');" id="tab_3">Trailer</a></li>
</ul>
( JQuery )
Podemos usar esta librería para dar un poco más de animación al fichero que hemos conseguido. Lo primero es ir al sitio oficial de JQuery y descargar la última versión.
La librería JQuery contiene una gran cantidad de funciones que permiten seleccionar grupos de elementos. Por ejemplo, si quisieramos seleccionar todos los enlaces (<a>) de una página y hacer que desaparecieran con un efecto de deslizado hacia arriba, tendríamos que poner en la cabecera de la página el siguiente codigo:
<script src="scripts/jquery-1.2.3.min.js"></script>
<script>
//Cuando se cargue el Dto. ejecuta el contenido ...
$(document).ready(function(){
$("a").slideUp();
});
</script>
Colocando el código anterior en la cabecera de nuestro documento podremos comprobar que todos los enlaces desaparecen con un efecto de deslizamiento hacia arriba.
Trabajo con los Selectores ( Pestañas )
Después de practicar, vamos a modificar el código de nuestras pestañas eliminando la parte de javascript y añadiendo el atributo title y una clase más: tab. De esta manera podremos referirnos a todos los elementos que contengan la clase tab o cuyo id corresponda al atributo title.
<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">Ficha</a></li>
<li><a href="#" title="content_2" class="tab">Sinopsis</a></li>
<li><a href="#" title="content_3" class="tab">Trailer</a></li>
</ul>
Ahora, con estos dos elementos, se pueden utilizar todos los enlaces con la clase “tab” y se puede localizar cualquier elementos cuyo Id sea igual que el atributo title del enlace que haya sido pulsado. Necesitamos añadir el enlace a la librería en la cabecera de nuestra página y añadir una nueva función a nuestro fichero javascript:
<script src="scripts/jquery-1.2.3.min.js"></script>
Esta nueva función, básicamente, lo que hace es ocultar todas las pestañas cuando se carga el documento y dejar visible sólo la que está activa:
// cuando el documento se cargue, ejecuta el contenido ...
$(document).ready(function(){
// cuando se pulsa un enlace
$("a.tab").click(function () {
// desactiva todas las fichas
$(".active").removeClass("active");
// activa la ficha seleccionada
$(this).addClass("active");
// oculta los elementos con la clase 'content' con deslizamiento hacia arriba
$(".content").slideUp();
// Detecta el atributo 'title' de la ficha seleccionada y encuentra el elemento con el miso Id. Entonces lo muestra con un deslizamiento hacia abajo.
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
Y con eso queda terminado nuestro ejemplo. En la página de Jquery hay una variante para la construcción de un fichero que aporta sencillez y otra manera de conseguir los mismos resultados.
Nos queda pendiente un ejemplo de fichero con las facilidades que nos brinda Dreamweaver, y la librería Spry. Espero que hayas disfrutado del tutorial.
A continuación tienes el código de mi ejemplo, varía sobre todo en los estilos, pues he tenido que adaptarlo a WordPress. Recuerda que el artículo original de Collis Ta’eed está muy bien detallado.
Ver Código (+/-)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Ejemplo de Fichas con JQuery</title>
<!--Cargar los estilos -->
<link rel=”stylesheet” href=”fichas_estilos.css” type=”text/css” media=”screen” />
<!--Cargar la librería jquery el archivo con las funciones javascript -->
<script src=”scripts/jquery-1.4.2.min.js”></script>
<!--Cargar el archivo con las funciones javascript -->
<script src=”fichas_functions.js” type=”text/javascript”></script>
</head>
<body>
<div id=”tabbed_box” class=”tabbed_box”>
<h4>Olvídate de Mí<small>Ficha Técnica</small></h4>
<div class=”tabbed_area”>
<ul class=”tabs”>
<li><a href=”#” title=”content_1″ class=”tab active”>FICHA</a></li>
<li><a href=”#” title=”content_2″ class=”tab”>Sinopsis</a></li>
<li><a href=”#” title=”content_3″ class=”tab”>Trailer</a></li>
</ul>
<div id=”content_1″ class=”content”>
<ul>
<li><img src=”imagenes/olvidate_de_mi.jpg” /></li>
<li>Título Original<small>Eternal Sunshine of the Spotless Mind</small></li>
<li>Año<small>2004</small></li>
<li>País<small>U.S.A.</small></li>
<li>Director<small>Michel Gondry</small></li>
<li>Reparto<small>Jim Carrey, Kate Winslet</small></li>
</ul>
</div>
<div id=”content_2″ class=”content”>
<ul>
<li>Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relación. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.
<P>Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasión inicial. (FILMAFFINITY)</P>
</li>
</ul>
</div>
<div id=”content_3″ class=”content”>
<ul>
<li>Trailer situado en Youtube, con subtítulos.</li>
<li>
<object width=”425″ height=”344″>
<param name=”movie” value=”http://www.youtube.com/v/IVpd3iGszU0&hl=es_ES&fs=1&”>
</param>
<param name=”allowFullScreen” value=”true”>
</param>
<param name=”allowscriptaccess” value=”always”>
</param>
<embed src=”http://www.youtube.com/v/IVpd3iGszU0&hl=es_ES&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed>
</object>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
estilos.css
@charset "utf-8";
/* CSS Document */
body {
background-image:url(imagenes/fondo_2.jpg);
margin:40px;
}
/* Centrar el contenido */
#tabbed_box {
margin: 0px auto 0px auto;
width:500px;
}
/* Encabezado */
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
/* Elementos internos */
.tabbed_area {
border:1px solid #494e52;
background-color:#fff7b3;
padding:8px;
}
/* Elementos de la lista */
ul.tabs {
margin:0px; padding:0px;
}
ul.tabs li {
list-style:none;
display:inline;
}
/* Estilos a los enlaces de la lista desordenada */
ul.tabs li a {
background-color:#464c54;
color:#FFFFCC;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #464c54;
}
ul.tabs li a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
}
/* Estilos del contenido */
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
/* Paso 13. Agregar algunos estilos al contenido */
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:14px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:10px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
/* Paso 15. Imágenes para las pestañas y el fondo */
ul.tabs li a {
background-image:url(imagenes/tab_off.jpg);
background-repeat: repeat-x;
background-position: top;
}
ul.tabs li a.active {
background-image:url(imagenes/tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-image:url(imagenes/content_bottom.jpg);
background-repeat: repeat-x;
background-position: bottom;
}