¿hasta donde podre llegar?

hector2c, mi bitacora

jQuery – crear plugin simple para tabs

with 6 comments

tabs o pestañas en nuestro buen español, antiguamente solia usar un muy excelente plugin pata tabs llamado idTab, pero al momento de actualizar jQuery a la versión 1.3.2 dejo de funcionar en ie6, paro completamente el desarrollo de mis labores.

asi que ya habiendo leido algo sobre la creación de plugins en jQuery decidi intentar crear uno, pues a ver como me va:

Descargar: DEMO

tab

estructura html

pues, la estructura html es muy sencilla, y usual, debe tener la siguiente forma:

<div id="tab" class="tab">
<ul>
	<li><a href="#tab1">Internet</a></li>
	<li><a href="#tab2">Wap</a></li>
	<li><a href="#tab3">jQuery</a></li>
</ul>
<div id="tab1">

Contenido para internet</div>
<div id="tab2">

Contenido para tecnologías WAP</div>
<div id="tab3">

Contenido para plugins jQuery</div>
<div class="pie">Este div es opcional</div>
</div>

pueden observar que existe una lista, y un conjunto de divs, creo que la idea ya esta definida, por cada click que haga en un enlace de la lista, hara ocultar todos los divs y mostrara al div que tenga como referencia.

el estilo

bueno, no se si sea necesario agregar el código del estilo, pero para los curiosos ahi les va

@charset "utf-8";
/* CSS Document */

body{
	font-family: "Lucida Sans Unicode";
	font-size: 11px;
}

.tab{
	margin: auto;
}
.tab ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.tab ul li{
	float: left;
	padding: 7px 0px;
	border-right: 1px solid #fff;
}
.tab ul li a{
	padding: 7px 14px;
	background-color: #CCC;
	text-decoration: none;
	color: #369;
}
.tab ul li a:hover{
	background-color: #ddd;
}

.tab .selected{
	background-color: #eee;
}

.tab div{
	clear: both;
	padding: 20px;
	*padding-top:10px;
	border: 1px solid #CCC;
}
p{
	margin: 0px 0px 20px 0px;
}
.ultimo{
	margin: 0px 0px 0px 0px;
}
.tab div.pie{
	text-align: right;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

el plugin jQuery: tab

a continuación explico el code del plugin

jQuery.fn.tab = function() {
	var div = jQuery(this);
	$(div).find("div:not(.pie)").hide().eq(0).show();
	$(div).find("ul li a").eq(0).addClass('selected');
	$(div).find("ul li a").click(function(){
		$(div).find("ul li a").removeClass('selected');
		$(this).addClass('selected');
		$(div).find("div:not(.pie)").hide();
		$( $(this).attr('href') ).show();
	});
}

la descripción

linea 01: creo la función con el nombre tab
linea 02: almaceno en una variable llamada div todo el contenedor div
linea 03: ocultamos todos los divs de contenido situados dentro del contenedor, a eXepción del div que tiene la clase .pie, seleccionamos el primer div con eq(0) y luego lo mostramos
linea 04: ubicamos el primer item de la lista y le agregamos la clase de estilo .selected, dara un efecto de enfoque

linea 05: aqui viene un evento de tipo click al momento de hacer click en uno de los items de la lista.
linea 06: una vez hecho click removemos a todos los enlaces de la lista la clase .selected
linea 07: ahora al enlace de la lista que hicimos click añadimos la clase de estilo .selected, para dar el efecto de enfocado
linea 08: ocultamos nuevamente a toodos los div a eXepción del div de clase .pie (este div es opcional agregarlo, en mi caso lo agrego para agregar botones como agregar, modificar, cancelar, etc)…
linea 09: ubicamos el nombre del div a mostrar tomando el atributo del enlace ‘href’ con ‘attr’: $(this).attr(‘href’), y mostramos al div enlaZado.

añadiendo las dependencias

añadimos jQuery, nuestro plugin, y una hoja de estilos.



	

ejecutando el plugin

pues, sencillamente…


	$(document).ready(function(){
		$("#tab").tab();
	});

Anuncios

Written by hector2c

mayo 7, 2009 a 11:45 am

Publicado en jquery, tutorial

Tagged with , , , ,

6 comentarios

Subscribe to comments with RSS.

  1. no funciona en explorer, en mozilla si

    trippas

    mayo 28, 2009 at 6:21 pm

  2. Estimado, muy buena aplicacion, bastante mas rapida que muchas otras que he probado.
    Solo una duda, habra algun truco para hacer una llamada random al tab cada vez que se carga la pagina ? Eso seria interesante.
    saludos!

    Fernando

    mayo 29, 2009 at 4:31 pm

  3. Hola.. estan muy bueno tu tuto, pero extrañamente al insertar un div dentro de los divs desaparecen.

    Este div no aparece aunque seleccione el tab.

    Jonathan

    mayo 31, 2009 at 4:00 pm

  4. ya, ya lo arregle.

    // JavaScript Document
    jQuery.fn.tab = function() {
    var div = jQuery(this);
    $(div).find(“.hoja”).hide().eq(0).show();
    $(div).find(“#items li a”).eq(0).addClass(‘selected’);
    $(div).find(“#items li a”).click(function(){
    $(div).find(“#items li a”).removeClass(‘selected’);
    $(this).addClass(‘selected’);
    $(div).find(“.hoja”).hide();
    $( $(this).attr(‘href’) ).fadeIn();

    });
    }

    Jonathan

    mayo 31, 2009 at 4:03 pm

    • @Jonathan: hola, disculpa por no responder a tiempo, andaba un poco atareado, actualmente estoy reescribiendo el plugin con las ideas aportadas, espero puedas perdonar la falta de interes, cuidate.

      hector2c

      agosto 21, 2009 at 3:30 pm

  5. También funciona en Internet Explorer (versión 6 en adelante), solo que en Internet Explorer 6 hay un margen de 4 o 5 pixeles entre los tabs y el contenido.

    elandy2009

    septiembre 8, 2009 at 11:09 pm


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: