icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-01-18

Tutorial visitado 29.578 veces Descargar en PDF
jQuery: cómo crear nuestros propios plugins

jQuery: cómo crear nuestros propios plugins.


0. índice de contenidos.


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.

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

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.


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:

El siguiente es el código de la librería que implementa el plugin: jquery.inputHighlight.js, está autocomentado:

A continuación, el código de la librería que hace uso del plugin: try_jquery.inputHighlight.js

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.


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

jmsanchez@autentia.com

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2011-10-04-16:18:48

Autor: sis

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

Fecha publicación: 2011-10-04-16:14:39

Autor: sis

hola men como para que cada ves que registre una nueva persona me aparesca la hora de registro
nada mas viejo

Fecha publicación: 2010-11-11-03:09:49

Autor: zapatero

Gracias, estaba buscando un ejemplo claro de la aplicación de parametros y fue el más claro que encontré...