jQuery: cómo crear nuestros propios plugins.
0. índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Nuestro propio plugin.
- 4. Un plugin más elaborado.
- 5. Referencias.
- 6. Conclusiones.
1. Introducción
Ya hemos hablando en la introducción
a jQuery que éste es plugable. Un plugin en jQuery no es más que un método propio de la función jQuery creado para extender la funcionalidad
del propio objeto jQuery.
|
1 2 3 4 5 |
jQuery().somePlugin(); // o $().somePlugin(); |
La comunidad de desarrolladores en torno a jQuery ha creado cientos de plugins,
http://plugins.jquery.com/, con lo que podemos extender su funcionalidad, y ya hemos
visto en adictos alguno de ellos: jcarrusel y jtip.
Nosotros crearemos un plugin cuando necesitemos «buscar o crear algo», y el «hacer algo» sobre lo encontrado, o creado, no esté disponible en jQuery, o a través de un plugin ya existente.
En este tutorial vamos a ver cómo crear un plugin para jQuery sencillo, para sentar las bases, y otro un poco más elaborado.
2. Entorno.
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
- Sistema Operativo: Mac OS X Snow Leopard 10.6.1
- jQuery 1.3.2.
3. Nuestro propio plugin.
Para crear nuestro plugin, podemos extender de dos objetos:
- jQuery: que maneja la lógica interna de la librería,
- jQuery.fn: que maneja interacciones con los elementos visuales.
En función del tipo de plugin extenderemos de uno u otro objeto.
Nuestro plugin debemos incluirlo en una librería javascript que debería llamarse: jquery.myplugin.js, donde myplugin
sea el nombre de nuestro plugin.
Es importante
- incluir la importación de nuestra librería después de la de jQuery en nuestros html, e
- invocar a nuestros métodos cuando el DOM este totalmente cargado.
Como no podía ser de otra manera, nuestro primer plugin será un hola mundo. A continuación, el código de nuestra librería: jquery.helloWorldPlugin.js
|
1 2 3 |
jQuery.sayHello = function(message){ alert(message); } |
El código es sencillo, asignamos a la función sayHello creada para el objeto jQuery, la invocación a una función que recibe un mensaje como parámetro; ese mensaje
será el que mostraremos mediante una alerta.
Para poder hacer uso del plugin basta con incluir la librería en nuestro html e invocar a la función desde cualquier elemento creado u obtenido
con jQuery.
En el siguiente código añadimos al objeto document un evento onClick, de modo que cuando el usuario pulse sobre cualquier parte de la
página se invoque a la función sayHello de nuestro plugin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery Hello World plugin</title> <script type="text/javascript" src="./js/jquery-1.3.2.js"></script> <script type="text/javascript" src="./js/jquery.helloWorldPlugin.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document).bind("click", function(){ $.sayHello("Hola mundo!") }); }); </script> </head> <body> <small>Haz click en cualquier parte de la página.</small> </body> </html> |
4. Un plugin más elaborado.
Vamos a intentar hilar un poco más fino, inyectando un comportamiento común a todos los componentes de texto de un formulario, ahora si, extendiendo
el objeto que maneja las interacciones con los elementos visuales.
El objetivo es tener un comportamiento que permita resaltar objetos, modificando su color de fondo.
Primero el código html, se trata de ver cómo importamos las librerías; la página no incluye más que un formulario con tres campos, con sus
correspondientes etiquetas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Highlight jQuery plugin</title> <script type="text/javascript" src="./js/jquery-1.3.2.js"></script> <script type="text/javascript" src="./js/jquery.inputHighlight.js" ></script> <script type="text/javascript" src="./js/try_jquery.inputHighlight.js" ></script> </head> <body> <h1>Highlight jQuery plugin</h1> <form method="post" action="" name="test1"> <table> <tbody> <tr> <td> <label for="name">Name</label> </td> <td> <input id="name" type="text" /> </td> </tr> <tr> <td> <label for="country">Country</label> </td> <td> <input id="country" type="text" /> </td> </tr> <tr> <td> <label for="password">Password</label> </td> <td> <input id="password" type="password" /> </td> </tr> </tbody> </table> </form> <br /> <small>Mueve el foco entre los campos del formulario</small> </body> </html> |
El siguiente es el código de la librería que implementa el plugin: jquery.inputHighlight.js, está autocomentado:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// definición de la función $.fn.highlight = function(options){ // puede recibir un array de parámetros nombrados // invocamos a una función genérica que hace el merge // entre los recibidos y los de por defecto var opts = $.extend({}, $.fn.highlight.defaults, options); // para cada componente que puede contener el objeto jQuery que invoca a esta función this.each(function(){ // asignamos a la asignación del foco la invocación a una función $(this).focus(function(){ // que asigna al fondo el color recibido o el asginado por defecto $(this).css({"background" : opts. background}); }); // asignamos a la perdida del foco la invocación a una función $(this).blur(function(){ // que asigna al fondo un color blanco $(this).css({"background" : "white"}); }); }); }; // definimos los parámetros junto con los valores por defecto de la función $.fn.highlight.defaults = { // para el fondo un color por defecto background: '#a6cdec' }; |
A continuación, el código de la librería que hace uso del plugin: try_jquery.inputHighlight.js
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ // haciendo uso de la parametrización por defecto $("form :input:visible").highlight(); // asignando un color de fondo diferente // $("form :input:visible").highlight({background: 'red'}); }); |
Podemos invocarla con o sin parámetros, en el segundo caso, al ser nombrados, el código queda muy legible. En ambos casos la funcionalidad se está
«inyectando» a todos los campos visibles de un formulario.
5. Referencias.
- http://jqueryui.com/docs/
- http://plugins.jquery.com/
- How to create a plugin for jQuery
- A jQuery plugin development pattern
6. Conclusiones.
Los beneficios de crear un plugin frente hacer uso de una simple función de una librería propia, son evidentes:
- podemos inyectar el comportamiento creado a cualquier objeto que pueda crear o manejar jQuery,
esto es, a cualquier nodo de nuestro árbol DOM, - podemos extender de funciones propias de jQuery que nos hacen más fácil, ligero y legible el código javascript.
La fácil extensibilidad de jQuery es uno de los factores que ha influido en su gran aceptación y, viendo lo sencillo que resulta hacerlo, no
es de extrañar.
Un saludo.
Jose
Gracias, estaba buscando un ejemplo claro de la aplicación de parametros y fue el más claro que encontré…
hola men como para que cada ves que registre una nueva persona me aparesca la hora de registro
nada mas viejo
oye como realizo un web como facebook cada vez que alguien cambie algo me aparseca la hora de regstro o eliminacion nada mas solo eso y listo
php realiza eso estudie a fondo y parce que nesecito de manejo de plugins
Buena tarde, actualmente estoy escribiendo un libro, en el cual toco varios temas de programación, me preguntaba si puedo agregar el link de este articulo al libro
Hola, Francisco:
Puedes incluir en tu libro los enlaces que necesites, sin problema, siempre que menciones al autor de cada uno de ellos.
Un saludo.