> Manuales > Manual de jQuery

Para construir plugins en jQuery tenemos que seguir una serie de normas. Además veremos un nuevo ejemplo práctico sobre el desarrollo de plugins en jQuery.

Con los plugins en jQuery podemos ampliar Framework, creando nuevos métodos para dotar de nuevas funcionalidades al objeto jQuery. En el artículo anterior ofrecimos una explicación general sobre los plugins en jQuery y en el presente vamos a adentrarnos en su desarrollo.

Como habrás comprobado en el Manual de jQuery, el framework ya contiene muchas funciones para hacer cosas interesantes, que se basan en la utilización del objeto jQuery, así que ahora aprendamos a extender este objeto para proporcionar funcionalidades nuevas a nuestras páginas. Pero atención, porque tenemos que realizar el trabajo siguiendo una serie de normas, para asegurar que los plugins funcionen como deben y los pueda utilizar cualquier desarrollador en cualquier página web.

Aquí puedes ver un listado normas, que son sólo unas pocas, pero que resultan tremendamente importantes.

Estas reglas serán suficientes para plugins sencillos, aunque quizás en escenarios más complejos en adelante necesitaremos aplicar otras reglas para asegurarnos que todo funcione bien.

Ejemplo de un plugin en jQuery

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

Dado el código anterior, al abrir la página parpadearán los elementos de la clase "parpadear" y luego habrá un botón que repetirá la acción de parpadear cuando se pulse.

En este caso no hemos colocado el script en un archivo aparte con el nombre jquery.parpadea.js, tal como se recomendaba, pero de momento será suficiente para probar esto de los plugins y quizás más fácil porque así no necesitamos más que un archivo HTML con todo el código junto. Podemos ver el código completo de este ejemplo a continuación:

<html>
<head>
<title>Creando plugins en jQuery</title>
   <script src="../jquery-1.4.1.min.js"></script>
<script>
jQuery.fn.parpadea = function() {
   this.each(function(){
      elem = $(this);
      elem.fadeOut(250, function(){
         $(this).fadeIn(250);
      });
   });
   
   return this;
};
$(document).ready(function(){
   //parpadean los elementos de class CSS "parpadear"
   $(".parpadear").parpadea();
   
   //añado un evento clic para un botón, para que al pulsarlo parpadeen los elementos de clase parpadear
   $("#botonparpadear").click(function(){
      $(".parpadear").parpadea();
   })
})
</script>
   
</head>
<body>
   <p class="parpadear">Hola que tal, esto parpadeó gracias a jQuery!</p>
   <p>Parafo normal que no va a parpadear.</p>
   <p class="parpadear">Sí parpadea</p>
   <p>Parafo normal que no va a parpadear tampoco...</p>
   <div class="parpadear" style="background-color: #ff9966; padding: 10px;">Esta capa también tiene la clase parpadear, con lo que ya se sabe...</div>
   <p><input type="button" value="Parpadea de nuevo" id="botonparpadear"></p>
</body>
</html>

Para acabar, puedes acceder al ejercicio en una página aparte.

Nota: Contamos con un taller de JQuery donde recopilamos un conjunto de plugins y mostramos cómo se construyen.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual