miércoles, 22 de abril de 2015

Jquery - Como crear un plugin en Jquery

Posted by daycry at 12:52 Labels: , ,

Entendiendo el concepto

En la creación de nuestro plugin, hay dos objetos que podemos extender, de entre los cuales debemos elegir según sea su fin:
  • El objeto jQuery se extiende cuando se necesita crear una función genérica que no necesita interactuar con los elementos DOM de la página. Cuando creamos una función bajo este objeto, la forma de llamarlo es $.mifuncion. Ejemplos de este tipo de funciones, tenemos por ejemplo las funciones de Ajax como $.post
  • El objeto jQuery.fn se extiende cuando queremos añadir métodos al “wrap” que jQuery hace a los objetos DOM. Cuando añadimos una función a este objeto, la forma de llamarlo sería $(domElement).mifuncion(). Con esto podemos añadir mucha funcionalidad a los elementos de nuestras páginas y pienso, que es lo más utilizado.
Una vez que sabemos que dos tipos de plugins podemos crear, vamos a recordar un par de cosillas antes de meter mano a los ejemplos:
  • Hay un patrón generalizado de la nomenclatura de los plugins:jquery.nombre_plugin.js
  • Lógicamente, siempre debes de incluír la librería jQuery antes del código de extensión.
Hay dos tipos de extensiones de jQuery: las que extienden funcionalidad al “wrap” de jQuery y las que crean funciones genéricas o globales bajo el espacio de nombres jQuery.

El método extend()

Este es el método que nos va a ayudar a incrementar funcionalidad a jQuery, pues todo el código de nuestro plugin debe de ir definido dentro de él. Por lo tanto si queremos añadir un método llamado red() que cambie el color de los elementos, esta sería la estructura:
view plaincopy to clipboardprint?
  1. jQuery.fn.extend(  
  2.     red: function(){  
  3.         /*Código aquí*/  
  4.     };  
  5. );  
Con el código anterior ya podremos hacer cosas como esta: $(“body>div”).red();

Construyendo nuestro primer plugin

Vamos a seguir con él código anterior y vamos a crear un método que cambie a color rojo todos los elementos encapsulados dentro del objeto jQuery. Para ello vamos a usar el método genérico de jQuery llamado each(). Este método ejecuta una función en el contexto de cada elemento encontrado:
view plaincopy to clipboardprint?
  1. jQuery.fn.extend({  
  2.         red: function(){  
  3.             /*Recorre todos los elementos encapsulados*/  
  4.             this.each(function(){  
  5.                 /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento 
  6.                 DOM por el que se está pasando*/  
  7.                 jQuery(this).css("color","#F00");  
  8.             });  
  9.         }  
  10. });  
Fácil ¿no? Poco hay que decir respecto al código anterior, aunque puede que os llame la atención un detalle: se está usando jQuery en lugar de su alias $. Bien esto es algo importante pues tiene que ver con la consistencia del plugin.
Como muchos de vosotros habréis visto en nuestra introducción a Prototype, jQuery no es la única librería que usa el símbolo $ como alias, de modo que en jQuery se puede desactivar dicho alias para solventar problemas de conflictividad. Así que si el alias está desactivado y nuestro plugin lo usa…mal vamos ¿no? Seguid leyendo que más adelante os diré un truquillo para poder seguir usando el $ :)

Un ejemplo más elaborado

El ejemplo anterior, era una base para que podáis ver bien la estructura de un plugin. Ahora vamos a hacer un ejemplo un poco más grande para que podáis ver la funcionalidad, ya que el anterior carecía de esto.
En prácticamente todas las webs de hoy en día, se ve alguna caja de texto con un texto por defecto que al recibir el foco desaparece, volviendo a aparecer cuando el foco se pierde y la caja está vacía. El código es bastante sencillo puesto que solo hay que manejar dos eventos:focus() y blur(); pero vamos a hacer un plugin para jQuery para que sea todo más fácil:
view plaincopy to clipboardprint?
  1. jQuery.fn.extend({  
  2.         fijarTexto: function(texto,activeColor,disabledColor){  
  3.             /*Recorre todos los elementos encapsulados*/  
  4.             this.each(function(){  
  5.                 /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento 
  6.                 DOM por el que se está pasando*/  
  7.                 var $this = jQuery(this); //Convertimos a jQuery  
  8.                 /*Esto es para la primera vez*/  
  9.                 $this.css("color",disabledColor).val(texto);  
  10.                 /*Cuando recibe el foco, si está el texto por defecto, lo borra y cambia el color*/  
  11.                 $this.focus(function(){  
  12.                     if($this.val() == texto){  
  13.                         $this.val("").css("color",activeColor);  
  14.                     }  
  15.                 });  
  16.                 /*Cuando pierde el foco, si está vacío, pone el texto por defecto y cambia el color*/  
  17.                 $this.blur(function(){  
  18.                     if(jQuery.trim($this.val()).length==0){  
  19.                         $this.css("color",disabledColor).val(texto);  
  20.                     }  
  21.                 });  
  22.             });  
  23.        }  
  24. });  
Como podréis ver, nuestro plugin también cambia los colores de los inputs, ya que normalmente se le pone un colo mas clarito cuando se muestra el texto fijo, y se cambia a un color más visible cuando recibe el foco. De esta forma ahora podemos hacer lo siguiente:
view plaincopy to clipboardprint?
  1. $(document).ready(function(){  
  2.         $("#login").fijarTexto("Usuario","#000","#BCBCBC");  
  3.         $("#password").fijarTexto("Contraseña", "#000","#BCBCBC");  
  4. });  
Una curiosidad, si os fijáis, se está usando el método jQuery.trim() para eliminar espacios al comienzo y al fin de los textos. Pues bien, esta función si la quisiésemos crear nosotros, la tendríamos que extender en: jQuery.extend({ trim: function(){} }); Este es otro ejemplo del otro tipo de plugins que se pueden hacer.
Podéis ver el ejemplo funcionando en la sección de demostración.

Truco: Usar el alias ‘$’ en nuestros plugins

Como lo prometido es deuda y dije que os lo mostraría, vamos allá. Está claro que no es un gran esfuerzo tener que escribir la palabra jQuery en lugar del típico $, pero cuando se está acostumbrado al alias, siempre se te acaba escapando. Lo que se hace en todos los plugins que he visto, es meter todo el código bajo una función y llamar a esta pasándole el objeto jQuery. Mejor un ejemplo:
view plaincopy to clipboardprint?
  1. function init_plugin($){  
  2.     $.fn.extend({/*código aquí*/});  
  3. }  
  4. init_plugin(jQuery);  
Se entiende ¿no? Simplemente de esta forma tenemos la variable $ en un ámbito local. Si todavía no lo has entendido, mirátelo bien antes de seguir, leyendo…Vale, ahora que ya lo has entendido, vamos a ver como se hace en el mundo real de una forma más abreviada:
view plaincopy to clipboardprint?
  1. (function($){  
  2.     $.fn.extend({/*código aquí*/})  
  3. })(jQuery);  
Este código es lo mismo que el anterior pero con una función anónima, y es así como debes hacerlo ;)

No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )