Llegado a este punto del Manual de jQuery tenemos la base suficiente para trabajar con ejemplos interesantes y prácticos. Además. para dominar el esquema de trabajo típico con este framework Javascript, seguramente nos venga bien seguir practicando en la realización de ejemplos que pongan en práctica todo lo visto hasta el momento.

En artículos anteriores ya explicamos los plugins en jQuery y en este artículo continuaremos trabajando con ellos, pues son la manera más adecuada de hacer componentes para páginas web, con un código limpio y ordenado, con la ventaja que los podremos reutilizar en diversos proyectos, nuestros o incluso de otros desarrolladores.

En esta ocasión vamos a realizar un ejemplo de tip sencillo con jQuery, osea, un sistema para crear elementos "calientes" que, al pasar el ratón sobre ellos, muestren un mensaje con una explicación contextual, lo que habitualmente se conoce como "tip". Lo cierto es que anteriormente en este manual ya explicamos una manera de hacer un tip simple, cuando vimos los eventos de ratón mouseenter y mouseleave, con lo que la práctica actual se basará en el artículo visto anteriormente.

Sin embargo, el modo en el que vamos a desarrollar el tip tiene una una diferencia fundamental, con respecto a las explicaciones anteriores y es que antes no se utilizaban los plugins porque no los habíamos explicado todavía. Con ello, el ejemplo que veremos ahora implementado por medio de un plugin, será mucho más interesante porque ahorraremos código y podremos portarlo a otras webs sin mayor dificultad.

El ejemplo que vamos a ver a continuación, para hacernos una idea de los objetivos, lo hemos publicado en una página aparte.

Esquema de funcionamiento del plugin de tip

Para poder seguir este ejemplo con mayor facilidad, vamos a explicar los pasos que debe realizar este plugin específicamente, sin repetir lo que ya se comentó en el artículo de Reglas para hacer plugins en jQuery.

• Para llamar al plugin, recordemos, invocamos un método con el nombre del plugin, sobre elementos de la página web que tenemos en un objeto jQuery. Ese objeto jQuery puede tener uno o varios elementos de la página que hemos obtenido con un selector. El método del plugin que ejecutamos sobre el objeto jQuery, recibirá un texto como parámetro, que será lo que aparezca en la capa del tip.
• El plugin se encargará como primer paso de generar la capa del tip e insertarla en el código del documento. En el momento de insertarla no se verá todavía, porque las capas del tip tendrán el estilo CSS display:none.
• Definiremos un evento mouseenter sobre el elemento "caliente", es decir sobre aquellos elementos sobre los que invocamos el plugin. Ese mouseenter se encargará de mostrar la capa del tip y colocarla en un lugar próximo a donde se encuentra la puntera del ratón.
• Definiremos un evento mouseleave, también sobre los elementos "calientes", que se encargará de ocultar la capa del tip.

Eso es todo. Así que veamos el código del Plugin.

jQuery.fn.creaTip = function(textoTip) {
   this.each(function(){
      elem = $(this);
      var miTip = $('<div class="tip">' + textoTip + '</div>');
      $(document.body).append(miTip);
      elem.data("capatip", miTip);
      
      elem.mouseenter(function(e){
         var miTip = $(this).data("capatip");
         miTip.css("left", e.pageX + 10);
         miTip.css("top", e.pageY + 5);
         miTip.show(500);
      });
      elem.mouseleave(function(e){
         var miTip = $(this).data("capatip");
         miTip.hide(500);
      });
   });
   
   return this;
};

Lo importante ahora en este código es fijarse en la manera de crear el plugin. Como vemos, estamos asignando una función a la propiedad jQuery.fn.creaTip. Con ello realmente estamos extendiendo las funcionalidades del framework Javascript para que a partir de ahora los objetos jQuery dispongan de un método nuevo llamado "creaTip", que recibe un parámetro que es el texto que tiene que aparecer en el tip.

Como en todos los plugins jQuery, tenemos que hacer un recorrido a los elementos que pueda haber en el objeto jQuery que reciba este método nuevo. Esto se hace con this.each() y en ese recorrido tenemos que hacer todas las acciones necesarias para dotar de la funcionalidad nueva a esos elementos.

Ahora veamos las siguientes líneas de código.

elem = $(this);

Con esa línea creamos una variable elem a la que asignamos el valor $(this), es decir, el objeto jQuery con el que estamos trabajando.

var miTip = $('<div class="tip">' + textoTip + '</div>');

Con esta línea generamos sobre la marcha un elemento nuevo, que es una capa con la class CSS "tip" que guardamos en la variable miTip. Como texto en el div colocamos el contenido de la variable "textoTip". Este nuevo elemento se ha creado simplemente, pero aun no lo hemos metido en la página. En este momento simplemente se creó una variable miTip con el elemento en memoria.

$(document.body).append(miTip);

Con esta línea metemos en el cuerpo de la página el elemento DIV generado previamente. El elemento se colocará en el código de la página al final del todo, antes de cerrar el BODY. Aunque se haya insertado un elemento en la página, no se verá todavía, puesto que la capa insertada tiene la clase CSS "tip" y luego veremos que a esta clase le hemos metido un display:none para que no aparezca hasta que se pase el ratón por encima del elemento con tip.

elem.data("capatip", miTip);

Con esta línea hacemos una cosa interesante. Con elem.data() estamos guardando un dato en el elemento "caliente". El dato tiene el nombre "capatip" y el valor es miTip (la capa del tip). Con este paso estamos almacenando la capa del tip en el elemento que lo tiene que mostrar, así tendremos cada tip asociado a su propio elemento.

Luego en el código se definen dos eventos sobre el elemento "caliente", para mostar y ocultar el tip cuando el puntero del ratón entre y salga de él. Esas funciones para procesar los eventos son como las que pudimos conocer en el artículo en el que vimos el tip simple sin definir el plugin. Pero hay un detalle que merece la pena comentar. Veamos el código del evento mouseenter

elem.mouseenter(function(e){
   var miTip = $(this).data("capatip");
   miTip.css("left", e.pageX + 10);
   miTip.css("top", e.pageY + 5);
   miTip.show(500);
});

Como se puede ver, lo primero que se hace es:

var miTip = $(this).data("capatip");

Con esto estamos accediendo al dato "capatip" que habíamos guardado en el elemento que tiene el tip. En ese dato, como habíamos comentado, contiene la capa del tip que debemos mostrar. Luego, simplemente hacemos las acciones necesarias para situar esa capa del tip en un lugar próximo al puntero del ratón y mostrarla en la página con el método show().

Después del recorrido con each() y antes de acabar la función del plugin, tenemos que devolver el propio objeto jQuery que recibió el método, con return this.

Una vez definido el plugin, para generar los tips tenemos que invocarlo sobre los elementos de la página que deseemos que muestren un tip. Recordar de hacer este paso sólo cuando la página esté lista para recibir acciones:

$(document).ready(function(){
   $("#elemento1").creaTip("todo bien...");
   $("#elemento2").creaTip("Otra prueba...");
})

Código completo de la página del tip jQuery

Quizás venga bien ver el código completo de este ejemplo de creación de plugins en jQuery, donde podremos ver todo el proceso completo de implementación y puesta en marcha del tip.

<html>
<head>
<title>Trabajando con plugins en jQuery - Tip simple</title>
<style type="text/css">
.tip{
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
    width: 200px;
}
</style>
<script src="../jquery-1.4.1.min.js"></script>
<script>

jQuery.fn.creaTip = function(textoTip) {
   this.each(function(){
      elem = $(this);
      var miTip = $('<div class="tip">' + textoTip + '</div>');
      $(document.body).append(miTip);
      elem.data("capatip", miTip);
      
      elem.mouseenter(function(e){
         var miTip = $(this).data("capatip");
         miTip.css("left", e.pageX + 10);
       miTip.css("top", e.pageY + 5);
         miTip.show(500);
      });
      elem.mouseleave(function(e){
         var miTip = $(this).data("capatip");
         miTip.hide(500);
      });
   });
   
   return this;
};


$(document).ready(function(){
$("#elemento1").creaTip("todo bien...");
$("#elemento2").creaTip("Otra prueba...");
})
</script>

</head>
<body>
<h1>Trabajando con plugins en jQuery - tip simple</h1>

<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Pasa el ratón por encima de esta capa...</div>
<p>
Este texto es para poner <a id="elemento2" href="#">este enlace que también tiene tip</a>.
</p>

</body>
</html>

El ejemplo se puede ver en marcha en una página aparte.

Esperamos que con este ejemplo y los explicados anteriormente en este manual de desarrollo web .com se haya comprendido la manera de hacer plugins en jQuery. Ahora sería interesante que cada uno pueda practicar por su parte lo aprendido, para realizar algún otro plugin simple que os ayude a afianzar los conocimientos.