Crear funciones jQuery con opciones

Ver el VídeoTutorial crear un Plugin con jQuery

Hola, en esta ocasión quiero mostrar a través de un sencillo ejemplo como crear una función jquery que contenga opciones que permitan cambiar unas determinadas propiedades del elemento, o añadirle una función.

Primeramente abrimos la función Jquery ...

$.fn.color = function(options)
{
//plugin
};

Como se puede observar existe un parámetro llamado "options", pero este parámetro lo normal es que sea optativo, así que tendremos que declarar una opción "defaults" que será la opción dominante en caso de no especificarse explícitamente en el parámetro.

var defaults =
{
color : "#000000",
opacity: "1",
funcion: function(){}
}

Como se puede ver se ha declarado una variable llamada defaults, con 3 opciones, una para aplicar el color, otra para la opacidad y otra que es para albergar una función.

Ahora es necesario hacer que defaults conste como prioritaria si el parámetro options no contiene nada, así que ...

var options = $.extend(defaults, options);

Con extend estamos combinando el contenido de defaults y options en la variable options, es decir ambos son lo mismo, así que si al utilizar la función no se especifica ninguna opción, se aplicarán las opciones que por defecto tiene la variable defaults.

A continuación empezamos a construir el plugin ...

/*plugin*/
this.css({color: defaults.color});
this.fadeTo("slow", defaults.opacity);
/*plugin*/

Como se puede observar estamos aplicando las propiedades que tendrá el objeto por defecto, defaults.color, defaults.opacity, quedando el plugin al completo de la siguiente forma ...

$.fn.color = function(options)
{
var defaults =
{
color : "#000000",
opacity: "1",
funcion: function(){}
}


var options = $.extend(defaults, options);

/*plugin*/
this.css({color: defaults.color});
this.fadeTo("slow", defaults.opacity);
/*plugin*/



//Averigua si el parámetro options contiene una función
if($.isFunction(options.onComplete)) {
options.onComplete.call();
}};

Ahora haremos uso de la recién creada función ...

<script>
$(function(){
$("#default").click(function(){
$("#caja").color();
});
$("#rojo").click(function(){
$("#caja").color({ color: "red", opacity: "0.7", funcion: $("#caja").css({fontSize: "20px"}) });
});
$("#verde").click(function(){
$("#caja").color({ color: "green", opacity: "0.9", funcion: $("#caja").css({fontSize: "17px"}) });
});
$("#azul").click(function(){
$("#caja").color({ color: "blue", opacity: "0.8", funcion: $("#caja").css({fontSize: "14px"}) });
});
});
</script>
<input type="button" id="default" value="default">
<input type="button" id="rojo" value="rojo">
<input type="button" id="verde" value="verde">
<input type="button" id="azul" value="azul">
<div id="caja"><h1>Función Jquery con opciones</h1></div>

Y aquí está la demo ...

Función Jquery con opciones

También puedes ver el vídeo tutorial de "Como crear un plugin con Jquery"