Plugin Tip con opciones en jQuery

Un ejemplo de plugin en jQuery para hacer un sistema de tip más avanzado, que permite configurarse por medio de unas opciones en el plugin. 

Hace poco tiempo publicamos un artículo en DesarrolloWeb.com 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

});

});