1 de abril de 2010

Como Crear Plugin jQuery (Plug-ins en jQuery)

Veamos un ejemplo simple de como crear un Plugin jQuery.

Sin dudas la aceptación de jQuery está basada en su robustez y sencillez de uso, pero también en la gran cantidad de plugins que la comunidad a desarrollado para el Framework jQuery. Hoy veremos lo extremadamente sencillo que resulta crear un plugin para jQuery. En realidad exploraremos 2 variantes distintas de crear plugins jQuery (las 2 primeras):

  1. Plugin, Función Global jQuery.
  2. Plugin jQuery asociado a un objeto jQuery.
  3. Métodos Abreviados jQuery. (De estos hablaré en otra ocasión.)

 

Función Global jQuery

jQuery dispone de un determinado grupo de funciones globales ($.each(), $.ajax(), $.data(), etc.), pero además nos da la posibilidad de que nosotros implementemos nuestras propias utilidades o métodos globales jQuery. Para explicarles como lograrlo desarrollaremos una simple función o método $.showAlert() que recibirá un mensaje y mostrará el archiconocido alert() de javascript.

Nota: El ejemplo carece de sentido pero nos dará la idea concreta de lo que podemos lograr.

Después de implementada esta función ($.showAlert()), en teoría podrías hacer esta llamada en nuestras páginas web:

$.showAlert('Probando la creación de funciones jQuery globales.');

Pero pasemos al código. Lo primero que haremos es crear un archivo js donde implementar nuestra función global jQuery, en mi ejemplo lo nombraremos "jQuery.MiEmpresa.FuncionesGlobales.js", y contendrá el siguiente código:

//JQuery.MiEmpresa - Funciones Globales
jQuery.showAlert = function (mensaje) {
  alert(mensaje);
}

Nuestra función global jQuery $.showAlert() lo único que hace es recibir un parámetro y mostrarlo en un alert() básico. Ya habíamos comentado que apenas tenía sentido nuestro ejemplo, pero es solo para dar una idea, a lo mejor este ejemplo sería mucho más útil sí en lugar de mostrar un alert(), creamos un dialogo modal jQueryUI para mostrar el mensaje con un aspecto más elegante.

Y así de simple es crear una Función Global jQuery.

Nota: Al crear plugins o métodos jQuery, NO deberíamos usar el método abreviado $. Debemos tener en cuenta que (bajo determinadas circunstancias y para evitar conflictos) puede abandonarse el uso del método abreviado con $.noConflict().

 

Plugin jQuery asociado a Objeto jQuery

Además de las funciones globales, jQuery también dispone de un amplio grupo de métodos de objetos ($('Selector').css(), $('Selector').attr(), $('Selector').val(), etc.), pero además la comunidad de desarrolladores jQuery ha implementado un sin número de plugins ($('Selector').autocomplete(), $('Selector').dialog(), $('Selector').jqGrid(), etc.). Veamos entonces como crear nuestro propio plugin jQuery.

Como siempre lo haremos a través de la implementación de un ejemplo. Imaginemos que tenemos un input text (TextBox) y que en él solo queremos captar valores alfanuméricos, por ejemplo es un valor de cantidad lo que captaremos. Pues este será nuestro objetivo, crear un plugin jQuery que nos cree una mascara que solo nos permita captar dígitos (input mask alfanuméricos). Al Plugin jQuery creado le nombraremos .soloDigitos().

Ver demo del plugin jQuery que crearemos.

Para mejor comprensión del plugin jQuery .soloDigitos(), dividiremos el artículo en 2 partes:

  1. En la primera, solo haremos la funcionalidad de que al input no se le puedan entrar caracteres que NO sean alfanuméricos.
  2. Posteriormente convertiremos dicha funcionalidad en un plugin para jQuery.

Input Mask Alfanuméricos

Como el objetivo de este artículo no es la funcionalidad en sí, sino más bien la creación del plugin, pues me limitaré a escribir el código y hacer algún escaso comentario:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Crear Plugin jQuery</title>
 
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
  <script type="text/javascript">
    $(document).ready(function () {
      $('.NumberInteger').keypress(function (event) {
        if (event.which && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
        }
      });
    });
  </script>
</head>
<body>
  <label for='cantidad'>Cantidad:</label>
  <input id='cantidad' class='NumberInteger' type="text" />
  <br /><span>Solo valores númericos</span>
</body>
</html>

En el ejemplo solo creamos un input al cual le pusimos como class='NumberInteger', lo hicimos para usar el selector jQuery $('.NumberInteger').

Para el selector anterior estamos implementando el evento keypress, dicho evento nos ofrece la propiedad .which que nos informa del código ASCII pulsado. Lo que hacemos es preguntar si la tecla pulsada no es un digito (menor que 48 o mayor que 57), en caso de no serlo invocamos al evento .preventDefault(), impidiendo que se inserte el caracter.

Con esto ya logramos que solo podamos insertar dígitos en el input; veamos ahora como convertir esta funcionalidad en un Plugin jQuery.

Crear Plugin jQuery

Para ello nos crearemos un fichero .js que contendrá el siguiente código:

jQuery.fn.SoloDigitos = function () {
  this.keypress(function (event) {
    if (event.which && (event.which < 48 || event.which > 57)) {
      event.preventDefault();
    }
  });
 
  return this;
};

La función escrita aquí es similar a la de la página, aunque hemos hecho algunos pequeños cambios para convertirla en plugin jQuery:

  1. Hemos definido la función como una nueva propiedad de jQuery.fn. Esto registra la función como un plugin jQuery.
  2. Utilizamos la palabra clave this para hacer referencia al objeto jQuery sobre el que actuará el plugin.
  3. Por último devolvemos this para garantizar que nuestro nuevo método se pueda encadenar.

Y con esto ya hemos creado un nuevo plugin jQuery, así de fácil… ahora podemos hacer lo siguiente en la página:

$('.NumberInteger').soloDigitos();

Al hacerlo de esta nueva forma, el código de la página queda mucho más claro e intuitivo.

Ver demo del plugin jQuery que crearemos.

Nota: Hemos implementado un Plugin jQuery extremadamente sencillo, pero si estas pensando en crear algo más complejo para compartir deberás tener en cuenta otros aspectos (Parámetros Opcionales, Métodos Transversales, Funciones Callback, entre otras reglas).

Artículos relacionados:

1 comentario:

  1. deberias probar ponerlo dentro de un $.each, para que sirva para mas de un elemento

    ResponderEliminar