viernes, 5 de diciembre de 2008

Tabs usando jQuery

Ayer por la noche estuve pensando que sería bueno postear con relación a los Video tutoriales de jQuery, así que para darles un poco de práctica me puse a crear un pequeño TAB con jQuery y CSS.

Por donde empezar (XHTML):

La estructura de nuestro TAB, de manera que utilizaremos listas de HTML. De forma que la primera lista es el encabezado de nuestro TAB.

<ul>
<li><a href="#">BLOGS</a></li>
<li><a href="#">webs</a></li>
<li><a href="#">contenido</a></li>
</ul>

<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li>
</ul>

<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>

<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
Resultado:
Dar Formato a nuestro Tab (CSS):

Ahora pasaremos a cambiarlo a formato TAB, añadiremos estilos en CSS. Agregaremos Selectores y DIVs a nuestro código XHTML.

<div id="contenedor">

<h1>jQuery Tab</h1>

<div id="tab_contenedor">

<ul class="titulos">
<li><a href="#" title="contenido_1" class="tab activo">BLOGS</a></li>
<li><a href="#" title="contenido_2" class="tab">webs</a></li>
<li><a href="#" title="contenido_3" class="tab">contenido</a></li>
</ul>

<div id="tab_contenido">
<div id="contenido_1" class="contenido">
<ul>
<li><a href="#">Blog sobre Diseño Web</a></li>
<li><a href="#">Blog sobre PHP</a></li>
<li><a href="#">Blog sobre jQuery</a></li>
<li><a href="#">Blog sobre AJAX</a></li></ul>
</div>

<div id="contenido_2" class="contenido">
<ul>
<li><a href="#">Web sobre PHP</a></li>
<li><a href="#">Web sobre jQuery</a></li>
<li><a href="#">Web sobre AJAX</a></li>
<li><a href="#">Web sobre Tecnlogía</a></li>
</ul>
</div>

<div id="contenido_3" class="contenido">
<ul>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>

</div>
</div>
¿Porqué he agrado etiquetas como contenedor, tab_contenedor,etc?.. aquí la respuesta ya en CSS.

<!--Color de la página, color de letra y tipo de letra-->
body{font-family:Arial, Helvetica, sans-serif; background: #023c4b; color:#FFFFFF;}

<!--Quitaremos el estilo a las Listas, para que dejen de tener esas bolitas a los lados jiji XD-->
ul,li{list-style:none;}

<!--Contenedor de todo el sitio, le asignamos un tamaño al igual lo Centramos con margin:10px auto-->
#contenedor{width:600px; margin:10px auto;}

<!-- TabContenedor es donde se encontrara el TAP, no el Cuerpo si no el TODO, en cambio TabContenido es el contendor del Contenido mostrado por cada encabezado-->
#tab_contenedor{padding:8px 8px; width:300px; background:#097793; border:1px solid #000000;}
#tab_contenido{padding:5px; background:#FFFFFF; border:1px solid #04667f;}

<!--El Encabezado del TAB, se mostrara en Linea (display:inline)-->
ul.titulos{margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.titulos li{display:inline;}

<!--Cada enlace del encabezado, se convertirá en Mayusculas, importante darle un Borde, para que se note que no esta activo, al igual que el Padding-->

ul.titulos li a{
color:#097793;
padding:5px 10px 6px 10px;
text-transform:uppercase;
border:1px solid #04667f;
background:#FFFFFF;}

<!--Aquí los Enlaces del Encabezado, lo que le da la gracia a que parezca TAB, es el border cambia a blanco en su parte de abajo, asi le da la perspectiva de que esta unido al contenido-->

ul.titulos li a:hover{border:1px solid #CCCCCC;}
ul.titulos li a.activo{color:#000000;
border-bottom: 1px solid #ffffff; background:#FFFFFF; }
a.tab{font: bold 15px Arial, Helvetica, sans-serif; text-decoration:none;}

<!--Un poco de estilo a las listas del contenido.-->
.contenido ul{margin:10px 0px; padding:0 11px;}
.contenido ul li{ margin-bottom:3px; font-size:15px;}
.contenido ul li a{color:#3f4c4f;}
.contenido ul li a:hover{color:#899fa5;}

<!--SUPER IMPORTANTE que el contenido_2 y 3 se encuentren en NO display, ya que con el jQuery, haremos que aparezcan al dar click sobre cada enlace relacionado.-->

#contenido_2, #contenido_3 { display:none; }

Resultado:

Por ultimo la programación (jQuery):

Si recuerdan, los métodos show y hide, era para mostrar y ocultar contenido, pues esos mismos utilizaremos para este TAB, se puede usar también el SlideUp/SlideDown, o si te gusta para FadeIn o FadeOut, como gustos, a mi me parecio una mejor opción tomar el Show/Hide. Recuerda que debes incluir la librería de jQuery!, por ejemplo (usando la nueva versión 1.2.6):
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

Código para generar los Tabs:

<script type="text/javascript">
// Cuando cargue el documento
$(document).ready(function(){

// Cuando el enlace del encabezao sea clickeado
$("a.tab").click(function () {

// Apaga el Activo
$(".activo").removeClass("activo");

// Cambia Activo
$(this).addClass("activo");

// Despliega, escondiendo
$(".contenido").hide('slow');

// Muestra el contenido, obteniendo del atributo title del enlace (p.e. contenido_1), y muestra con 'show' el contenido
var muestra = $(this).attr("title");
$("#"+muestra).show('slow');

});

});
</script>

VER DEMO >>

15 comentarios:

Marcos Cousseau dijo...

Muy bueno! ya sabía hacer el Tab show, pero ese efecto Javascrip me mató!

Muchas gracias!

Héctor Guedea dijo...

De nada Marcos!, que bueno que te fue útil.. Saludotes!

Isaac Flores dijo...

Hola amigo,mi nombre es isaac...esta bueno tu ejemplo...y aprovecho para hacerte una consulta...digamos que tengo un tab,cuyo resultado se obtiene con un tab ajax en jquery...como hago para añadirle eventos a los elemntos html obtenidos por ajax...espero tu ayuda...bye

Héctor Guedea dijo...

Hola Isaac, especificamente no se a que le quieras añadir eventos, pero con jQuery, es tan fácil manejarlos, que con solo decir, que al darle click al link encabezado, ejemplo:

('a.encabezado').click(function(){
$("div").html("Agrega este texto a todos los divs, al momento que de click a encabezado, si le pones div#encabezado, se agregara al DIV con ID encabezado");
});

donde el enlace tenga la clase encabezado, por asi decirlo:

<a href="#" class="encabezado">Enlace</a>

Pero no se que quieras hacer enciencia cierta, puedes ver ejemplos aquí

http://docs.jquery.com/Main_Page
es posible que ya venga el ejemplo que quieres hecho.

Saludos

Ivan dijo...

buena men me salvaste de una con este tutorial se te agradece

Héctor Guedea dijo...

@Ivan de nada amigo!!

Administrador dijo...

Pregunto: Y entonces pa que sirve el plugin tabs??

Héctor Guedea dijo...

@Administrador Obviamente un plugin te ayudará a realizar esta tarea, pero mi tutorial es cómo empezar desde 0 la creación de un Tab con jQuery, espero que te haya servido.

Saludos

Josele dijo...

mmmm exelente ! asi nos ayudas a aprender...

Ahora la pregunta...

Necesito linkear uno de los tabs, desde otra pagina... como podria hacerlo?

Te agradeceria mucho una respuesta!

Héctor Guedea dijo...

Josele,
A que te refieres con:"linkear uno de los tabs, desde otra pagina",
explica más al respecto por favor, que es lo que quieres hacer.

Saludos

Josele dijo...

Gracias Hector por responder.

Lo que necesito es que, desde otra hoja del sitio.. pueda volver a donde se encuentran los tabs... pero que esta vez, en vez de mostrarme la pestaña "Blogs" (siguiendo tu ejemplo)...

Me muestre, por ejemplo, la pestaña (Contenidos)...


Pense en volver con un link tipo:

index.html#contenido_3 pero como esta oculto el div... y esta activo el contenido_1... no logro lo que busco....


Ganas de aprender no me faltan, pero me enriedo con estos codigos a menudo jaja...

Desde ya, mil gracias por tu tiempo

Héctor Guedea dijo...

Josele,
El tab esta diseñado para obtener el atributo TITLE del enlace (link) y no del URL, por lo que por ese motivo no te funciona. Por lo que tienes que hacer unas modificaciones en el código del jQuery. O si no quieres modificar nada por tiempos, etc. esta este plugin http://www.stilbuero.de/jquery/tabs

que hace lo que tu quieres.
Un saludo

Carlos Aldas Galarza dijo...

Esta muy bueno el codigo, ahora una pregunta si puede ayudarme como puedo hacer si quiero que un boton del tab se muestre o se oculte, o en su defecto se active o desactive en respuesta al evento onChange de unos radioButtons?

lapasian dijo...

hola que tal tengo una consulta quizas un poco tonta pero estoy empezando con esto del jq quería saber si puedo poner un slider en jq, dentro de cada pestaña uno para cada pestaña.

lapasian dijo...

hola quería saber si podía agregar un slide en jquery con otro plugin dentro de los tabs por ejemplo dentro de blog un slide de imagenes y en webs otro completamente distinto pero con la misma funcionalidad??