Tabs con jQuery? Fácil!
Hay muchas formas de crear tabs en Ajax. Si buscas en google o cualquier otro buscador podrás encontrar cientos de opciones igual de válidas. Pero yo os voy a enseñar una manera fácil de hacerlo en tan solo 10 lineas de código. Además es funcional tanto en Chrome, Firefox, Opera, Safari e incluso Internet Explorer.
Vamos a empezar por lo primero, el código html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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="es" lang="es" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQUery Tabs - 2kblog.net</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <link href="tabs.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="tabs.js"></script> <script language="javascript" type="text/javascript"> jQuery(document).ready(function(){ jQuery("#tabs").tabs(); }); </script> </head> <body> <div id="tabs"> <ul class="misTabs"> <li><a href="#blog" class="activa">2kBlog</a></li> <li><a href="#tab1">Tab1</a></li> <li><a href="#tab2">Tab 2</a></li> </ul> <div id="blog"> Ejemplo 1 </div> Ejemplo 2 </div> <div id="tab2"> Ejemplo 3 </div> </div> </body> </html> |
Vamos a desribir el código:
- Como siempre la llamada a jQuery alojada en google.
- La llamada al css y al javascript que haremos
- Para que funcione la función javascript deberemos tener una estructura igual a la mostrada en el ejmplo, es decir, un div general, dentro una lista y antes de cerrar el div general los distintos divs a los que llamaremos.
- Para que el script funcione debemos llamarle mandandole la id del div general, en mi caso: #tabs
Ahora veamos el js de 10 lineas: (lo pongo comentado para que lo veais)
1 2 3 4 5 6 7 8 9 10 | jQuery.fn.tabs = function() { //Creamos la función var elemento = jQuery(this); //creamos una variable opara recoegr el elemento jQuery(elemento).find("div").hide().eq(0).show(); //Escondemos todas menos el primer elemento jQuery(elemento).find("ul li a").click(function(){ //para cada elemento clicado jQuery(elemento).find("ul li a").removeClass('activa'); //le quitamos la clase por si la tiene activa jQuery(this).addClass('activa'); //Añadimos la clase al elemento pulsado jQuery(elemento).find("div").hide(); //escondemos todos los divs jQuery( jQuery(this).attr('href') ).fadeIn(1000); //mostramos el div al elemento que hemos pulsado }); } |
Lo único que hay que señalar es que podemos cambiar el modo en que se muestra y la velocidad. En vez de fadeIn podemos usar slideDown o slideToggle o simplemente show. Y en cuanto a la velocidad podemos usar milisegundos, o poner “slow” para lento, “fast” para rápido o “normal” para normal. (recordad que si ponemos 3000 serán 3 segundos)
Un ejmplo de la función con el css del ejemplo:
Como podes ver podemos incluir texto o video o cualquier cosa que pensemos.
Podeis descargaros el ejemplo desde aquí:
5 comentarios »
RSS feed para los comentarios de esta entrada. TrackBack URL
Deja un comentario
links útiles
I wish to write articles based on the information collected through some copyright books. I won’t copy – paste the material but edit or modify it in such a way that the meaning remains the same. I would also give credit to the books and their authors. Am I breaking any copyright laws?.
Through Blogger, i have a blog using Blogspot. I would likie to know how to export all my posts from Blogspot to my newly created Weebly blog..
I know that there are probably millions of bloggers out there. I also know that there a small percentage of them make money from blogging. Does anyone out there do this, (make money from blogging) and how do they do it?.
I have the game and when I tried it on my computer, it was all broken up and crappy. I’m thinking of buying a new computer anyway. Does anyone know of a computer where the game works well?.
I would like to show my affection for your kind-heartedness in support of all those that have the need for assistance with in this idea. Your real dedication to passing the message all over had been exceptionally practical and has specifically helped employees much like me to attain their pursuits. Your entire interesting suggestions means a great deal a person like me and even further to my fellow workers. Warm regards; from each one of us.