The New Cult of Dead Cow

December 16, 2006






Hacking JQuery && JTip

Una de las librerias que mas utilizo para el desarrollo web es JQuery. Es más, ya habia hablado de ella en ocasiones anteriores. Su mayor punto fuerte, es la facilidad para poder escribir codigo javascript y la posibilidad de relacionar los eventos de nuestra pagina con nuestro javascript sin tener q tocar ni una linea de nuestro HTML ( un golazo a favor de la separación en capas ).

Como dijera antes, JQuery es una libreria muy compacta que tiene casi todo y no le falta casi nada.
Pero que pasa cuando requieres algo que no habian pensado los desarrolladores o que simplemente ignoraron por considerarlo poco común ?

Pues para eso JQuery permite la inclusión de plugins que nos permiten expandir nuestras funcionalidades hasta cosas no imaginadas. Uno de lo que mas utilizo es JTip, este plugin me permite crear tooltips para los anchors de mi pagina. Estos tooltips pueden incluir cualquier cosa, en realidad son un html completo.

Sin embargo la joda era que solo se incluian para etiquetas anchor. Hoy sin embargo, necesite ampliarlo para cualquier tipo de etiqueta.

Los cambios los tuve que realizar en la siguiente función

function JT_init(){
$(”.jTip”)
.hover(function(){JT_show($(this).attr(”href”),this.id,this.name)},function(){$(’#JT’).remove()})
.click(function()
{
if ($(this).attr(”return”) == null)
response = false;
else response = $(this).attr(”return”);
return response;
});
}

  1. El marcador original era $(”a.jTip”), lo cual solo permitia su uso con tags anchor. Al colocarlo solo $(”.jTip”), permite su uso en cualquier etiqueta con la clase jTip.
  2. El parametro original era this.href, pero eso no funcionaba en otros elementos que no fuera anchor. El parametro href es necesario porque indica donde esta la ayuda a mostrarse en el tooltip.
  3. El bloque de codigo original era return false;, lo cual indicaba que aunque se hiciera click en las etiquetas que servian de tooltip, estas no debian conducir a ninguna parte. Lo cual era logico para tags anchors, pero otros tags como los radiobuttons, checkbox necesitan que se procese el evento. La solución pasa por decirle al script que sino tiene el atributo return, entonces considere el comportamiento por defecto, o sea falso. Pero si tiene el atributo return, debe considerar el comportamiento en el indicado, que puede ser verdadero o falso.

Si desean descargar mi version modificada de jTip, pueden hacerlo de aca.

1 Comment »

The URI to TrackBack this entry is: http://necudeco.blogsome.com/2006/12/16/hacking-jquery-jtip/trackback/

  1. Necesito ayudaaaa…Como poder incluir una imagen al tooltip ademas del texto???…por mas que intento no puedo :( seria de gran ayuda tu respuesta:) gracias

    Comment by Ghislaine — November 29, 2007 @ 7:10 am

RSS feed for comments on this post.

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>























Get free blog up and running in minutes with Blogsome
Theme designed by B A Khan