Aprende sobre el Plugin Tip con opciones en jQuery

En el siguiente artículo explicaremos sobre un plugin para mostrar un tip con un mensaje que aparecería en una capa al pasar el ratón sobre un elemento caliente. Eso es lo que llamamos un tip y lo explicamos en el artículo Plugin jQuery para hacer un Tip simple.

Ahora vamos a hacer una modificación en ese plugin para implementar una serie de opciones, que nos permitirán configurar de una manera más versátil el comportamiento del plugin. Las opciones que vamos a implementar serán las siguientes:

• Velocidad de la animación de mostrar y ocultar el tip
• Animación a utilizar para mostrar el tip
• Animación a utilizar para ocultar el tip
• Clase CSS para la capa del tip

Todas esas opciones se definen, junto con los valores por defecto que van a tomar, al crear el código del plugin. En el anterior artículo ya explicamos de manera general cómo funciona el sistema de options en plugins, que vamos a utilizar a continuación.

Comenzamos por especificar, con notación de objeto, las opciones de configuración por defecto para el plugin:

var configuracion = {
   velocidad: 500,
   animacionMuestra: {width: "show"},
   animacionOculta: {opacity: "hide"},
   claseTip: "tip"
}

Ahora veamos el inicio del código del plugin, donde debemos observar que en la función que define el plugin se están recibiendo un par de parámetros. El primero es el texto del tip, que necesitamos para crear la capa del tip (Este parámetro ya aparecía en el código del plugin del artículo anterior). El segundo son las opciones específicas para configurar el plugin.

jQuery.fn.creaTip = function(textoTip, opciones) {
   //opciones por defecto
   var configuracion = {
      velocidad: 500,
      animacionMuestra: {width: "show"},
      animacionOculta: {opacity: "hide"},
      claseTip: "tip"
   }
   //extiendo las opciones por defecto con las opciones del parámetro.
   jQuery.extend(configuracion, opciones);

   this.each(function(){
      //código del plugin
   });
});

Método jQuery.extend()

Quizás en este código, lo que más nos llame la atención sea el lugar donde extiendo las opciones por defecto definidas en la variable "configuracion", con las opciones específicas para el plugin concreto, recibidas por medio del parámetro "opciones".

jQuery.extend(configuracion, opciones);

Esta sentencia es una llamada al método extend() que pertenece a jQuery. Esta función recibe cualquier número de parámetros, que son objetos, y mete las opciones de todos en el primero. Luego, después de la llamada a extend(), el objeto del primer parámetro tendrá sus propiedades más las propiedades del objeto del segundo parámetro. Si alguna de las opciones tenía el mismo nombre, al final el valor que prevalece es el que había en el segundo parámetro. Si tenemos dudas con respecto a este método, leer el artículo jQuery.extend().

Así, podemos ver cómo con extend() las propiedades por defecto del plugin se combinan con las que se envíen en las opciones. Luego, en el código del plugin, podremos acceder a las propiedades a través de la variable configuración, un punto y el nombre de propiedad que queramos acceder.

configuracion.velocidad

Código completo del plugin tip con opciones

Veamos todo el código de nuestro primer plugin en implementar el sistema de opciones:

jQuery.fn.creaTip = function(textoTip, opciones) {
   var configuracion = {
      velocidad: 500,
      animacionMuestra: {width: "show"},
      animacionOculta: {opacity: "hide"},
      claseTip: "tip"
   }
   jQuery.extend(configuracion, opciones);

   this.each(function(){
      elem = $(this);
      var miTip = $('<div class="' + configuracion.claseTip + '">' + 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,
            top: e.pageY + 5
         });
         miTip.animate(configuracion.animacionMuestra, configuracion.velocidad);
      });
      elem.mouseleave(function(e){
         var miTip = $(this).data("capatip");
         miTip.animate(configuracion.animacionOculta, configuracion.velocidad);
      });
   });

   return this;
};

Invocar al plugin con o sin las opciones de configuración

Para acabar, vamos a invocar al plugin del tip con opciones, pero lo vamos a hacer de dos modos, uno con las opciones por defecto y otro con opciones específicas.

Así se llamaría al plugin con las opciones por defecto:

$("#elemento1").creaTip("todo bien...");

En realidad le estamos pasando un parámetro, pero no son las opciones, sino es el texto que tiene que aparecer en el tip. Como no se indican opciones, ya que no hay segundo parámetro, se toman todas las definidas por defecto en el plugin.

Las opciones, según se puede ver en el código del plugin, se deberían enviar en un segundo parámetro cuando se llama al plugin, tal como se puede ver a continuación:

$("#elemento2").creaTip("Otra prueba...", {
   velocidad: 1000,
   claseTip: "otroestilotip",
   animacionMuestra: {
      opacity: "show",
      padding: '25px',
      'font-size': '2em'
   },
   animacionOculta: {
      height: "hide",
      padding: '5px',
      'font-size': '1em'
   }
});

Ahora hemos indicado varias opciones específicas, que se tendrán en cuenta al crear el plugin con este segundo código.

Para acabar, dejamos un enlace para ver el ejemplo en funcionamiento.

Fuente:enlace