Una de las capacidades más conocidas de jquery es su posibilidad de ser mejorado con plugins. Estos en su mayoría lo que hacen es crear un nuevo método a aplicar sobre los elementos DOM seleccionados con la funcion $() de forma que acciones bastante comunes en las páginas puedan replicarse solo con incluir el plugin.

Que puede llegar a hacer mi plugin

Al crear un plugin estamos limitados tan solo por las capacidades de javascript. Un plugin, por si solo podría llegar a ser una compleja web. Sin embargo, a efectos prácticos y para que los plugins puedan ser publicados o reutilizados debemos situarlos como sencillos métodos a aplicar a la función dolar ( $() ). Esto significa que nuestros plugins van a ser cambios programados en el DOM de nuestras páginas o asignaciones de series de eventos a los elementos seleccionados de forma automática. Así pues, sea lo que sea que queramos hacer debemos orientarlo como 1 o más plugins destinados a ser usados sobre cualquier elemento html, pues la función dolar ( $() ) puede ser lanzada sobre uno o muchísimos elementos del DOM a la vez.

También existen plugins que se hacen colgar de la función jquery. Estos son métodos sueltos que no quedan asociados en realidad a las funciones de jquery pero al usar este como base se crean dentro del objeto jquery. No voy a explicar como hacer este tipo de plugins puesto que no tienen ninguna complicación: se generan las funciones y punto.

Formas de actuar de los plugins

Para poder usar los plugins de jquery siempre hay que seguir una de estas 2 opciones.

1) Se incluye en el html la librería jquery, tras esta se incluye el plugin y a partir de ahí quedan listas las distintas funciones para poder ser usadas en el $(document).ready() de nuestra página.

2) Se incluye en el html la librería jquery, tras esta se incluye el plugin. En el html se usan clases especiales para marcar los elementos sobre los que debe actuar el plugin.

La única diferencia entre ambos sistemas es que en el segundo el cómo aplicar el $(document).ready() ya ha sido establecido. El problema es que en muchas ocasiones no queremos inundar nuestro html de clases solo por aplicar un plugin. A la hora de generar un plugin yo optaría por una mezcla de ambas: generamos el plugin para que cualquiera pueda usarlo en el $(document).ready() pero damos ya un archivo con el que iniciarlo con unas clases definidas. Así quien quiera podrá usar la opción que más le guste.

Conocimientos de javaScript necesarios

Para crear plugins no hacen falta grandes conocimientos, ni siquiera conocer la librería jquery a la perfección. Lo único realmente necesario va a ser dominar la notación literal que nos permite definir objetos directamente en el código. A partir de ahí crear nuestro plugin va a ser bastante sencillo.

Esquema para crear plugins en jquery

El esquema más eficiente a seguir para crear un plugin es el siguiente:

(function($){  
  $.fn.miNuevoPlugin = function( variable1, variable2 ) {  
      // Acciones que va a realizar mi plugin
  };  
})(jQuery);  

Básicamente necesitamos crear dentro del objeto fn de jquery nuestro nuevo método. Además encapsulamos esta definición en una función para garantizar que el plugin funcione aunque por el uso de otras librerías la función dolar ( $() ) haya sido redefinida. Con este sistema, mientras definimos el plugin, jquery siempre va a ser «$».

Partes a conocer

– La función

Como vemos en el esquema el nombre de nuestro nuevo plugin va a venir definido por el nombre que le pongamos al nuevo método del objeto fn. Así en el ejemplo de arriba el nuevo plugin se llama «miNuevoPlugin» y una vez creado podrá ser invocado en cualquier llamada a la función dolar ( $() ) por ese nombre: $(«#midDiv»).miNuevoPlugin();

– Los parámetros

También podemos definir que parametros se le van a poder pasar a nuestro plugin al definir el nuevo método. En el ejemplo de arriba definíamos variable1 y variable2 como parámetros lo que significa que al llamar al nuevo plugin tendremos que pasarle esos parámetros para que el los use como deba: $(«#midDiv»).miNuevoPlugin( var1, var2 );

– El elemento «this»

Dentro del plugin vamos a disponer de un array de jquery formado por todos los elementos que ha seleccionado la función dolar ( $() ) y sobre los que podemos trabajar. Incluso en el caso de que solo se seleccionase un elemento este sería el elemento this[0]. A «this», se le pueden aplicar las funciones de jquery pero por lo general queremos tratar cada elemento por separado con lo que al hacer el loop para trabajr el elemento tendremos que volver a meter este dentro de la función dolar para disponer de los métodos de jquery.

Asi si yo hiciese este plugin:

(function($){  
  $.fn.alertId = function() {  
    for(var i=0; i
Al lanzar $("#miDiv").alertId(); provocaría un alert que diría "miDIV". y al hacerlo con $("ul#miLista li").alertId(); provocaría un alert por cada uno de los elementos del listado "miLista".
A imaginar... y a crear
A partir de aquí la creación de los plugins ya es cosa de cada uno. Tan solo tienes que imaginar que quieres hacer y crear el o los plugins oportunos para ello.