jQuery – crear plugin simple para tabs
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

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();
});
mostrar código en wordpress.com
pues, luego de pasar muuucho tiempo, crei que el agregar código en wordpress.com seria cuestión de pago, mmm, afortunadamente googleando, encontre el siguiente ejemplo:
agregando la siguiente estructura (nota que es un ejemplo), se puede dar formato automático al código agregado, con numeración, coloreado, etc, en nuestro caso, agregamos algunas lineas css.

de lo cual tendriamos el siguiente resultado
body{
float: left;
clear: both;
}
table{
margin: auto;
border: 0px;
}
puede soportar varios formatos: cpp, csharp, css, delphi, html, java, jscript, php, python, ruby, sql, vb, xml
fuente: ubuntulife
jQuery
luego de destruir un poco el blog buscando e indagando, por fin pude agregar código a mi blog en wordrpress.com, crei que siempre seria con algun plugin, pero bueno, era muy sencillo…
segun nuestro amigo wikipedia jQuery es:
jQuery es una biblioteca o framework de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
jQuery, se puede descargar desde el siguiente enlace, actualmente se encuentra en la versión 1.3.2, tube algunos problemas, ya que solia usar su versión 1.2.6 y algunos plugins no andaban bien en la 1.3.2 como idTabs (muy bueno), jClock, etc.
primeramente se enlaza la libreria
<script language="javascript" type="text/javascript" src="su_carpeta/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
alert('hola mundo');
)};
</script>
el alert ‘hola mundo’ se enviara una vez cargada totalmente la estructura de la web, eso nos da la facilidad de ejecutar código javascript ’solo’ cuando se a cargado totalmente la estructura web, asi nos evitaremos muchos problemas…
en los proximos días estare actualizando este espacio, agregando los plugins que han pasado por mis manuus.
090406 – mi presencia
solo deseaba una llamada, un “hey, puedes venir a recogerme?”, un “hola conejito te extraño”, un mensaje de texto, tal vez no del cel, podria ser desde la web, algun correo…
sueñitos tontitos, y aquella ilusión dijo…
“tu presencia me enoja, vete, para vienes…”
luego de eso hui, con aquel pastelito en las manos… me acostumbro… a ser basura…

te extraño kde, mi viejo amigo, perdón por no cuidarte, tal vez, aun estarias aqui, mordiendo mis cables, caminando en mi camita, hechadote con las orejotas a lado, perdón amigo kde, te falle…
cuando parara la lluvia en mi corazón
cuando dejara de hablarme con tu voz
busco y no encuentro
sueño hasta despierto y no entiendo… cuando parara…
090402 – que estupideZ
estoy triste…
inicie algo horrible, ahora no puedo detenerlo, lo dejo todo en sus manos, la extraño, hoy por la tarde no aguante las ganas de llamarla, me imagino que debe estar bien… siempre lo esta…
nunca, desde que iniciaron sus clases vino a buscarme, nunca se paro en mi puerta, o me espero en la capilla sentadita como antes…
nunca hiZo algo…
io… solo espero…
090324 – deseo
hoy fui a buscarla,
martes por la tarde,
estaba muy bonita, me
dijo que su cuerpo
andaba mal, su figura…
nunca mire su figura,
solo miro su carita, que
me encanta ver…
la amo
le dije que la extraño,
que desearia que este
aqui a mi lado,
abrazarla… me dijo que
no…
io la extraño, desearia
que me envie mensajes
como antes…
no lo hace, no me
escribe… no me visita
siempre lo hago io, por
que no me da amor…
tantos años, tan rapido
se olvidan?, no
entiendo, quiero
entender, quiero
olvidar, queiro escapar,
quiero respirar otra
vez… pero deseo, que
sea por ella
deseo que ella sea
aquella salvavidas, que
busco, deseo qeu vuelva
a acariciarme cuando
este cansado, que se
heche en mi cuando este
cansada
que me mire dormir, me
de masajes, que me
rasque la cabeza…
me me muerda los labios,
que me bese, que me
abraze…
que me de amor, que me
espere, que suspire por
mi, que su corazón lata
por mi, que intente ser
la de antes…
que me pregunte si
almorze hoy, que me
traiga comida, que se
preocupe por mi, que sea
mi madre y amor, que me
extrañe
necesito tantas cosas de
ella, tantas…
deseo que este aqui,
hechadita a mi lado y
verla dormir…
deseo morir a su lado,
enevjecer a su lado…
ver a nuetros hijos
crecer…
pero cada minuto, cada hora, cada dia, cada semana, veo mas lejos mis sueños… la veo mas lejos
me siento mas lejos
y eso me esta matando… no quiero respirar, quiero dormir por siempre…
“soy un conchudo”
por que ella paso por eso…
i ahora io ioro i eia sonrie…
soy un maldito egoista…
090321 – jet – look what you’ve done
todo es tan divertido hasta que pierdes lo que ganaste…
090321 – ¿por que los días son tan oscuros ahora?…
me siento solo… no puedo negar este sentimiento, muy mal… solo, sin nadie a lado…
hoy fui a visitarla, descanzo la noche a mi lado, no la toque… no me enojo…
luego al despacharla
fui a su casa, sin desayunar, solo deseaba verla…
le ayude con su problema en las patitas, me gusta hacerle cariños…
luego me fui por la tarde
estoy tan solo…
al llegar a casa, en mi cuarto, no se que hacer, simplemente quedo parado, y miro mi alrededor, y aquellas lagrimitas caen, y solo observo, levanto mis brazos y digo que hago…
observo las cosas, mientras mi vista se nubla por aquellas traviezas gotas, y mi rostro se deforma evitando mostrar el dolor que llevo por dentro…
hasta el punto en que mis fosas nasales logran taparse, y no logro respirar, simplemente quedo parado observando todo a mi alrededor, solo observo y me hundo en este dolor…
trato de respirar, es bueno, por que ayuda a vivir, pero, de que vale respirar, si no es por algun objetivo, por algo, por alguien…
detesto este sentimiento
detesto sufrir, detesto estar asi, triste… ¿por que los días son tan oscuros?…
quiero ser feliz…
quiero sonreir…
quiero reir…
quiero salir de este agujero, tan profeundo, depresión, deseo ver a alguien extender su mano y que puedar tirar de la mia, para poder salvarme, por que estoy muriendo, y caigo cada vez mas profundo
dios, por que no me ayudas, como le ayudaste…
todo es tan vacio…
ahora, antes de llegar a casa… me imaginaba que seria si encontrara a otra persona, una persona salvadora… un angel de la guarda, una nueva guia, alguien nuevo…
alguien que me entienda…
alguien que me salve… quiero ser feliz
que hago
no se que hacer, ella era todo, aun la recuerdo, aun la amo…
aun recuerdo cuando era feliz a mi lado y dependía de mi
y yo no la valore…
090320 – compartiendo recuerdos
hoy ordene mis ficheros, termine de ordenarlos todos, gran parte fue ordenada en casa, y la otra en el trabajo (admito que estar asi de “temeroso” impide a uno desarrollarse adecuadamente en las labores)…
desearia estar dormido, he soñado muchas veces… desearia entender y ser capaz de controlar esta nostalgía, en momentos como estos es cuando leo textos raros…
hoy termine de ordenar 32 gb de recuerdos, mis recuerdos egoistas, que hoy los comparto…

espero los sepa usar, se que no los vera como io los e visto, con lagrimitas en los ojos, se que ella, dara otro uso…
tengo imagenes donde ella sale muy hermosa, admirablemente bella… se que guardara esas imagenes, espero guarde alguna de las nuestras…
la extraño, pero este sentimiento esta lentamente debilitandose, ella no se da cuenta… no quiero olvidarla… ella me obliga a hacerlo…
hoy dejare mi laptop en su casa, ella tendra todo el tiempo para ver, pero aun no entiendo cual es mi objetivo… se que no volvera, se que no regresara, se que nada podra ser como antes…
e concluido muchas veces que la solución para estar a su lado nuevamente, es, ironicamente alejarme de ella, por mucho tiempo, y luego… ser su amigo, luego, hacer que me necesite, y finalmente enamorarla…
pero, podre soportar todo eso? soy muy estúpido, por no haberla dejado libre antes, para que pensara, para que me extrañe, tal vez ahora, todo estaria mejor, tal vez ahora estaria a su lado, y tal vez no estaria aqui, sentado como un estúpido, escribiendo este tipo de textos.
io la ame…
gissella, por que?

