Cómo crear un plugin sencillo para jQuery

11 Apr
2012

Hoy vamos a crear un plugin para jQuery, sencillo pero útil. El plugin transformará un input normal (<input type=”text” …>) en un control con un más y un menos para que sea más cómodo de usar en una pantalla táctil.

Vamos a pasar de esto:

A esto:

 
 

Los botones sumarán o restarán del valor tantas unidades como le indiquemos, y tendremos también un máximo y un mínimo. De este modo, podemos limitar las opciones del usuario a las posibilidades que le demos. Podría servir, por ejemplo, para un selector de tallas.

Lo primero que vamos a necesitar es uno o más inputs. En el HTML debería haber alguna línea como esta:

<input type="text" class="control" value="56"></input>

La clase “control” será la que luego usemos para el selector de jQuery. Suponiendo que en el encabezado de la página ya está incluída una versión reciente de jQuery, pasamos al plugin:

plugin/0.js

La estructura de los plugin de jQuery es siempre bastante parecida. Se extiende jquery.fn con un método nuevo, que devolverá cada uno de los elementos a los que se haya aplicado el plugin. Paso a paso:

(function($){})(jQuery) hace que $ sea un alias de jQuery dentro de la función. Esto es útil cuando jQuery está en modo de compatibilidad y para no chocar con otros usos de $ a la vez que lo usamos de manera normal dentro del plugin.

$.fn.contador extiende con un método nuevo jQuery.fn. contador será el nombre del plugin. Dentro de esta función, this será el objeto jQuery que le hayamos pasado al plugin al llamarlo. Si tenemos un grupo de inputs como el de arriba, al llamar a $(‘input.control’).contador(), this será el array de inputs con la clase control que existan en nuestro documento HTML.

Por tanto, return this.each() devolverá cada uno de los elementos que hayamos pasado al plugin después de sus transformaciones.

 Iterando sobre inputs

plugin/1.js

Dentro del iterador each, this será un elemento del DOM, no un onjeto jQuery. PAra conseguir un objeto jQuery, debemos llamarlo con $(). En este caso, llamaremos nodo al objeto jQuery. Sólo aplicaremos el plugin a elementos de tipo INPUT y usaremos un campo data para almacenar si ya le hemos aplicado el plugin para no repetirlo.

Si el elemento es INPUT y no tiene data-contador, procedemos. Si no, pasaríamos al siguiente.

 Configuración

plugin/2.js

Vamos a darle unos valores por defecto. En este caso, he puesto 0 como mínimo, 10 como máximo y 1 como intervalo, de manera que nos serviría, por ejemplo, para puntuaciones de exámenes. Ahora veremos como cambiar esos parámetros para cada input.

 Tomando valores del HTML

plugin/3.js

El método .extend de jQuery permite unir dos diccionarios (named arrays o hashes) haciendo que el primero sean valores por defecto y el segundo sobreescriba algunos de ellos.

Imaginémonos que cambiamos en el HTML la línea de antes:

<input type="text" value="56"></input>

por una como:

<input type="text" data-minimo="-10" data-maximo="100" data-intervalo="0.5" data-unidades="ºC" value="56"></input>

Tendríamos en $(this).data los valores

{minimo: -10,
maximo:100,
intervalo:0.5,
unidades:'ºC'}

Que podemos combinar con los valores por defecto para que cada input tome parámetros distintos.

Fuera input

plugin/4.js

Una vez que ya tenemos la configuración y estamos iterando sobre los inputs, los ocultamos. No nos va a hacer falta porque le vamos a poner un div con las unidades y la etiqueta, para evitar que los usuarios escriban directamente en la caja.

 Envolviéndolo

plugin/5.js

Vamos a necesitar un nuevo DIV para englobar todo el control. Le vamos a dar una clase “controles_medida” que nos servirá luego para aplicarle estilos. El método wrap rodea nuestro elemento con otro. Como vamos a necesitar una referencia a este nuevo elemento, lo asignamos a la variable “padre”, tomando el parent() de nuestro nodo una vez creado.

La nueva etiqueta

plugin/6.js

Creamos una variable $etiqueta que será un objeto jquery con el valor del nodo y las unidades que hayamos puesto por defecto o en el input. Así, en lugar de una caja de input, tendremos un div del estilo “10kg” o “-4ºC”. Este objeto lo colgaremos de padre usando el método appendTo

Botón menos

plugin/7.js

Utilizando la misma técnica del punto anterior, creamos un objeto jquery con un poco de código HTML dentro. En este caso, le añadimos un método click encadenado, que hará que al pulsarlo ejecute una acción. En este caso, al haceer click en el botón menos, queremos que recupere el valor de nodo (usando el método .val()) y le reste config.intervalo. En caso de que sea menor que el mínimo, usaremos el mínimo como nuevo valor. Lo cambiamos en el nodo(recordemos que lo hemos ocultado), para que cuando enviemos el formulario todo funcione OK y también en la etiqueta.

Todo junto:

plugin/8.js

Haciendo lo mismo con el botón más, terminamos este plugin. Para usarlo, sólo hay que incluirlo en el código javascript de la página y llamarlo con $(‘input.clase’).contador();
Teneis un ejemplo completo en https://github.com/dei-biz/contador . El resultado es, más o menos, este:

 

Gracias por la atención. Quedo como siempre a vuestra disposición por si hay alguna duda.

Would like to share? These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Reddit
  • Facebook
  • Google Bookmarks
  • Ma.gnolia
  • TwitThis
  • LinkedIn

1 Response to Cómo crear un plugin sencillo para jQuery

Avatar

Cristofer

October 25th, 2012 at 18:56

Gracias es muy bueno :) (Y)

Comment Form

top