Creando Plugins jQuery

Creando Plugins jQuery

Los Plugins son un mecanismo que ofrece jQuery para poder encapsular funciones y métodos que hemos desarrollado con el objetivo de poder reutilizar en otras páginas, de esta manera nos ahorramos el trabajo de copiar y pegar en cada página los scripts que deseamos aplicar y lo que es más evitar el trabajo que lleva actualizar los scripts cuando tenemos una nueva versión o mejora.

Para iniciar un plugin es necesario definir las funciones o métodos públicos que va a implementar y lo podemos hacer de la siguiente manera

// JScript File

(function($) {

$.fn.<nombre de la función> = function([parámetros])

{

}

})(jQuery);

Por ejemplo si queremos que nuestro plugin muestre en un mensaje el contenido de una caja de texto

// JScript File

(function($) {

$.fn.Mensaje = function()

{

alert(this.val());

}

})(jQuery);

Si tenemos un control text llamado Text1 la llamada a la función del plugin sería

$('#Text1').Mensaje();

Por ejemplo este plugin lo podemos extender para que muestre el mensaje de cualquier objeto, solo llamando la función y que la función mensaje sea quien determine que propiedad y valor mostrar.

En el sitio oficial hay algunas recomendaciones que debemos tener en cuenta al momento de crear nuestro plugin, aquí voy a poner algunas pero se puede consultar la referencia completa en http://docs.jquery.com/Plugins/Authoring

  • Poner el nombre el plugin como jquery.[nombre del plugin].js, por ejemplo, jquery.mensajes.js
  • Los métodos públicos se deben incluir al objeto jQuery.fn ($.fn) y la funciones al objeto jQuery ($)
  • Dentro de los métodos this es la referencia al objeto jQuery actual.
  • Los métodos y funciones deben tener ; al final para evitar errores al momento de comprimir el código.
  • Se debe usar this.each para iterar dentro del conjunto de elementos que se han seleccionado

Hay algunos temas de crear plugin que vamos a ir tratando en una próxima entrega dentro de un ejemplo real.

2 comentarios:

Jero dijo...

Excelente tutorial! Sencillo pero conciso. Gracias!

omega96 dijo...

Muy buen tuto, muy facil de comprender, solo me quedo una duda, como puedo pasarle parametros?, saludos.