jQuery: cómo crear nuestros propios plugins.

5
47117

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.


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


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.





  
  jQuery Hello World plugin
  
  
  


  Haz click en cualquier parte de la página.



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:



  
  Highlight jQuery plugin
  
  
  


Highlight jQuery plugin


Mueve el foco entre los campos del formulario

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


// 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


$(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.

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

5 COMENTARIOS

  1. 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

    • 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.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad