Ejemplo de un plugin en jQuery - I

Ahora que ya sabemos las reglas básicas para hacer plugins podemos crear uno por nuestra cuenta que nos sirva para practicar lo que hemos aprendido. Te sugiero que identifiques los lugares donde hemos aplicado cada una de las anteriores normas de la lista, o al menos las que se puedan aplicar en este plugin tan simple que vamos a ver.

El plugin que vamos a construir sirve para hacer que los elementos de la página parpadeen, esto es, que desaparezcan y vuelvan a aparecer en un breve instante. Es un ejemplo bien simple, que quizás tenga ya alguna utilidad práctica en tu sitio, para llamar la atención sobre uno o varios elementos de la página. Para hacerlo, utilizaremos otras funciones del framework como fadeOut() (para hacer desaparecer al elemento) y fadeIn() (para que aparezca de nuevo).

jQuery.fn.parpadea = function() {

this.each(function(){

elem = $(this);

elem.fadeOut(250, function(){

$(this).fadeIn(250);

});

});

return this;

};

Con this.each creamos un bucle para cada elemento que pueda haberse seleccionado para invocar el plugin. Con elem=$ (this) conseguimos extender a this con todas las funcionalidades del framework y el objeto jQuery resultante guardarlo en una variable. Luego invocamos fadeOut(), enviando como parámetro un número que son los milisegundos que durará el efecto de desaparecer el elemento. Luego enviamos como parámetro una nueva función que es un callback, que se ejecutará cuando haya terminado fadeOut() y en esa función callback se encargará simplemente de ejecutar un fadeIn() para mostrar de nuevo el elemento. 

Nota: A lo largo del Manual de jQuery hemos visto varias de las cosas que utilizamos en este ejemplo, como los efectos en jQuery y las funciones Callback. 

Ahora veamos cómo podríamos invocar este plugin:

$(document).ready(function(){

//parpadean los elementos de class CSS "parpadear"

$(".parpadear").parpadea();

//añado evento clic para un botón. Al pulsar parpadearán los elementos de clase parpadear

$("#botonparpadear").click(function(){

$(".parpadear").parpadea();

})

}