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.

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;
};

Método jQuery.extend()

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

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

});

});

Concusión sobre la configuración de plugins con el objeto de opciones

Hasta el momento no hemos visto más que un código parcial de lo que sería un plugin con options para su configuración. Pero esperamos haber despejado ya algunas dudas. No obstante, veremos mejor cómo funciona todo por medio de un ejemplo en un artículo siguiente. 

Continuar la lectura con el ejercicio Plugin Tip con opciones en jQuery.

Invocar al plugin enviando el objeto de opciones

Ahora podemos ver el código que utilizaríamos para invocar al plugin pasando las opciones que deseamos:

$("#elemento).miPlugin({
dato1: "Hola amigos!",
dato2: true
});

O podríamos enviar sólo alguno de los datos de configuración, para que el resto se tomen por defecto:

$("<div></div>").miPlugin({
dato2: 2.05
});

O no enviar ningún dato al crear el plugin para utilizar los valores por defecto en todas las opciones de configuración.

$("p").miPlugin();

Definir opciones por defecto en el código del plugin

Con el siguiente código podemos definir las variables de configuración por defecto de un plugin y combinarlas con las variables de options enviadas por parámetro al invocar el plugin.

jQuery.fn.miPlugin = function(cualquierCosa, opciones) {
//Defino unas opciones por defecto
var configuracion = {
dato1: "lo que sea",
dato2: 78
}
//extiendo las opciones por defecto con las recibidas
jQuery.extend(configuracion, opciones);
//resto del plugin
//donde tenemos la variable configuracion para personalizar el plugin
}

La función principal del plugin recibe dos parámetros, uno "cualquierCosa" y otro "opciones". El primero supongamos que es algo que necesita el plugin, pero la configuración, que es lo que nos importa ahora, se ha recibido en el parámetro "opciones".

Ya dentro de la función del plugin, se define el objeto con las opciones de configuración, con sus valores por defecto, en una variable llamada "configuracion". En la siguente línea se mezclan los datos de las opciones de configuración por defecto y las recibidas por el plugin al inicializarse. Luego podremos acceder por medio de la variable "configuracion" todas las opciones del plugin que se va a iniciar. 

Nota: El modo en cómo se mezclan los datos por medio de extend(), podéis revisar en el artículo sobre el método jQuery.extend().