Este ejemplo nos introduce en como realizar de forma simple y rápida una sección con solapas (tabs). Es importante entender como es trabaja este ejemplo porque nos enseñará la teoría básica de los Tabs de jQuery Tools. Comprendiendo y dominando el ejemplo veremos lo simple y entretenido que puede ser crear un tabs como queramos.

Este es el aspecto final de lo que vamos a crear

• Tab 1
• Tab 2
• Tab 3

Hay dos términos que vamos a usar: tabs que son las solapas o elementos donde hacemos click y panes que son los contenidos que están asociados a los tabs.

Código HTML

Puedes usar cualquier elemento HTML para montar los "tabs" y los "panes". La ventaja de esta herramienta que no necesita un elemento específico para identificarlos, seremos nosotros en el código javascript los que identifiquemos cada uno de ellos. Por otro lado es importante que dejemos el código HTML lo más simple posible y mantener las normas estándar. Este es el HTML que hemos usado en el ejemplo.

<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>Primer contenido de Tabs. Los contenidos de los tabs los llamaremos "panes"</div>
	<div>Segundo contenido tab</div>
	<div>Tercer contenido tab</div>

</div>

Código JavaScript

La función del script es indicar quienes son los "tabs" y los "panes" y activar el efecto solapa que deseamos. Este es el código que se usa en la demo

// se recomienda que esté después de la secuencia de comandos.
$(function() {
	// crear ul.tabs para trabajar como tabs para cada div directamente bajo div.panes
	$("ul.tabs").tabs("div.panes > div");
});

Primero debemos seleccionar el elemento raiz "root element" para los tabs con jQuery selector. Con ello creamos a todos los elementos bajo el raiz como hijos o dependientes de el como "tabs". Ponemos entonces otro selector de jQuery como el primer argumento para construir el "tabs" el cual selecciona los "panes" (contenidos) que serán usados. En este caso no seleccionamos el elemento raiz, sino que seleccionamos directamente los "panes". Es es porque no necesariamente tienes un razonable vinculo entre el elemento y los panes.

Después del este código Javascript con una sola línea vamos con el CSS que es el principal trabajo de personalización y aspecto.

Código CSS

Este es el mayor trabajo que vamos a tener que realizar para crear unos tabs de aspecto profesional y funcional. Las principales funciones de cada elemento se han comentado en el código a fin de simplificar el entendimiento de este. No es un ejemplo mínimo para lo que necesitamos en este caso, pero si el necesario para conseguir un aspecto agradable en este ejemplo.

En este ejemplo hemos utilizado el siguiente código CSS para crear los tabs. .

<!-- tab pane styling -->
<p><style type="text/css">

/* tab pane styling */
div.panes div {
	display:none;		
	padding:15px 10px;
	border:1px solid #999;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}
/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;
	height:30px;
	border-bottom:1px solid #666;	
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(images/jquery/tabs.png) no-repeat -652px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 111px;
	text-align:center;	
	text-decoration:none;
	color:#000;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -652px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -652px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */

/* width 1 */
ul.tabs a.w1 	{ background-position: -519px 0; width:134px; }
ul.tabs a.w1:hover 	{ background-position: -519px -31px; }
ul.tabs a.w1.current { background-position: -519px -62px; }

/* width 2 */
ul.tabs a.w2 	{ background-position: -366px -0px; width:154px; }
ul.tabs a.w2:hover 	{ background-position: -366px -31px; }
ul.tabs a.w2.current { background-position: -366px -62px; }


/* width 3 */
ul.tabs a.w3 	{ background-position: -193px -0px; width:174px; }
ul.tabs a.w3:hover 	{ background-position: -193px -31px; }
ul.tabs a.w3.current { background-position: -193px -62px; }

/* width 4 */
ul.tabs a.w4 	{ background-position: -0px -0px; width:194px; }
ul.tabs a.w4:hover 	{ background-position: -0px -31px; }
ul.tabs a.w4.current { background-position: -0px -62px; }

/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}
</style>

Hay cientos de efectos diferentes para realizar en la creación de trabs, simplemente debemos saber que deseamos tener de aspecto y disponer de los elementos gráficos necesarios para conseguir nuestro objetivo. El ejemplo puede servir como plantilla base para crear tus propios diseños, o bien como índice que elementos a trabajar. La hoja de estilos se ha creado usando la técnica de "CSS Sprite". De esta forma nada más se necesita un solo elemento de imagen.

Como se ve hemos dispuesto diferentes anchos como alternativas. Podrás ajustar de forma individual cada "tab" asignando diferentes "class" para cada una de las solapas, desde la más estrecha hasta la más ancha. Este técnica es muy buena cuando quieres usar imágenes en los tab y deseamos que mantenga la misma velocidad de funcionamiento en todas al tiempo.

Si lo deseas puedes visitiar la página web original de FlowPlayer y este ejemplo usando este link