Ver el VídeoTutorial crear un Plugin con jQuery

En el siguiente ejemplo podréis ver un sencillo plugin jquery que aceptará en uno de sus parámetros un callback, un callback nos permite realizar una determinada operación una vez que ha terminado la ejecución de la orden que le fue mandada , ya en anteriores posts enseñe como hacer un plugin básico, un plugin con opciones y ahora veremos uno con opciones y un callback.

Abrimos la función ...

$.fn.fuente = function(options, callback)
{
//plugin
};

Como se puede ver la función fuente contiene dos parámetros "options" y "callback", para options realizaremos la misma operación que se enseño en un post anterior Crear funciones jQuery con opciones ...

var defaults =
{
fontSize : "18px",
fontFamily: "arial"
}

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

Ahora pasamos a definir el parámetro "callback", este parámetro al igual que "options" es opcional, así que haremos uso de javascript para definir que si es indefinido, es decir que si no se hace uso de él, que se le considere como una función, en este caso sin argumentos.

if (callback === undefined)
{
callback = function(){};
}

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

/*plugin*/
this.animate({left: "-=30"}).css({fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, position: "relative"}).animate({left: "+=30"}, function(){callback();});
/*plugin*/

El plugin consiste en una sencilla animación de movimiento, a través de "options" podremos cambiar las propiedades css fontSize y fontFamily y si observamos al finalizar la animación se añade la función callback() que en caso de quererla utilizar, lo podremos hacer a través del segundo parámetro de la función.

El plugin completo ...

$.fn.fuente = function(options, callback)
{
var defaults =
{
fontSize : "18px",
fontFamily: "arial"
}

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

if (callback === undefined)
{
callback = function(){};
}

/*plugin*/
this.animate({left: "-=30"}).css({fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, position: "relative"}).animate({left: "+=30"}, function(){callback();});
/*plugin*/

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

Haciendo uso del nuevo plugin fuente() ...

$(function(){
$("#default").click(function(){
$("#caja").fuente();
});
$("#lucida_console").click(function(){
$("#caja").fuente({fontSize: "18px", fontFamily: "'Lucida Console'"}, function(){$("#resultado").fadeIn(1000).text("Ejecución completada").fadeOut(1000);} );
});
$("#trebuchet").click(function(){
$("#caja").fuente({fontSize: "19px", fontFamily: "trebuchet"}, function(){$("#resultado").show(1000).text("Ejecución completada").hide(1000);} );
});
$("#verdana").click(function(){
$("#caja").fuente({fontSize: "16px", fontFamily: "Verdana"}, function(){$("#resultado").slideDown(1000).text("Ejecución completada").slideUp(1000);} );
});
});

Y el cuerpo HTML ...

<input type="button" id="default" value="default">
<input type="button" id="lucida_console" value="Lucida Console">
<input type="button" id="trebuchet" value="Trebuchet">
<input type="button" id="verdana" value="Verdana">
<div id="resultado"></div>
<div id="caja"><h1>Función Jquery con opciones y callback()</h1></div>

Y finalmente la demo ...