Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Cómo crear Plugins para jQuery


  Publicado hace |  Etiquetas: , , , , , , ,

Como ya sabemos, jQuery es de las más potentes y utilizadas librerías de Javascript, hoy en día reconocida como el propio framework de Javascript que sin duda se caracteriza por las funciones y eventos que implementa en este lenguaje, haciendo un marco de trabajo más preciso para quienes programan en él.

jQuery nos proporciona gran facilidad al escribir código, ya que es tan sencillo, que podemos realizar grandes proyectos en tan poco tiempo. Pero vayamos a lo principal.

Algunas veces necesitamos funciones específicas que sean capaces de interactuar con varios elementos del DOM y a su vez con otras funciones, ya sean similares o distintas. JQuery es una de las mejores herramientas que poseemos y que además de eso, nos permite extenderlo para así poder crear nuevas funciones en este framework. Es buena idea optar por desarrollar plugins que sean de gran utilidad para nuestras aplicaciones web.

Desarrollo de un plugin básico

Es importante saber que existen distintas formas de desarrollar un plugin en jQuery, pero no todas son la manera correcta de hacerlo. Lo principal a tener en cuenta es que NO debemos de sobrecargar el objeto jQuery.fn (nos permite extender las funciones en jQuery). Una manera correcta de hacerlo es como se muestra en la siguiente imagen:

Ejemplo #1:

jquery

Nota: es importante conocer el comportamiento del alias “this” para poder emplear correctamente ciertas funciones.

Como se muestra en el ejemplo, lo que estamos haciendo básicamente es obtener un parámetro “$” (signo de dólar), el cual representará nuestro objeto de jQuery; una vez obtenido el parámetro, extendemos su funcionalidad añadiendo “.fn.extend” y como se podrán dar cuenta dentro de estas funciones abrimos llaves, en donde le indicaremos que el parámetro introducido será de tipo objeto. Una vez hecho esto haremos algo muy parecido al JSON, sin embargo, en este caso ya estamos tratando con el POO (Programación Orientada a Objetos) de JavaScript.

Después, añadimos el nombre de nuestra nueva función (en el caso de la imagen) holamundo y a continuación se le añaden dos puntos “:”, que expresa que lo siguiente será la función que vamos a realizar. Dentro de esta función lo primero que hacemos es retornar el valor de this (que será el o los elementos obtenidos mediante un selector de jQuery). Para estar seguros de que nuestra nueva función “holamundo” se aplicará en todos los elementos que queramos, emplearemos la función “each”.

Por último utilizaremos una función ya establecida de jQuery, el evento “click”; antes que nada, como podrán observar la función “holamundo” recibe un parámetro llamado “mensaje” el cual se mandará por una alerta cada vez que nosotros demos clic en los elementos seleccionados.

AHORA, LLAMANDO EL EJEMPLO DESDE UN DOCUMENTO HTML QUEDARÍA DE LA SIGUIENTE MANERA:

jquery2

EJECUTANDO ESTE NUEVA FUNCIÓN EN EL NAVEGADOR:

jqueryNavegador

Pueden copiar este ejemplo, ejecutarlo en su navegador para comprobar que funciona correctamente, y que la función se aplica en los 3 botones que se encuentran en la página. Bien, ahora que hemos visto este ejemplo,  comencemos por aprender los conceptos básicos al crear un plugin en jQuery.

Inicio de un plugin

La manera correcta de inicializar un plugin de jQuery es la siguiente:

(function(a){

/* código */

})(jQuery)

Tal vez sea una forma más compleja de hacerlo, pero muestra más versatilidad en el código, además nos permite encapsular nuestro plugin de jQuery para evitar un conflicto con algún otro framework que se esté utilizando en la misma aplicación.

En este caso, el primero y único parámetro que se obtiene no es más que un objeto de jQuery con el cual se trabajará para crear las nuevas funciones. Puede nombrarse de la manera que sea, en este caso lo conocemos como “a” pero podemos obtenerlo con cualquier otro nombre, sin embargo, la forma más popular de nombrar a este parámetro es con el signo de dólar “$”.

Cómo nombrar un plugin para jQuery

Actualmente la forma más popular de nombrar un plugin de jQuery es de la siguiente manera “jquery.aquielnombre_plugin.js” por ejemplo:

jquery.validarformulario_plugin.js

Con esto indicamos que se trata de un plugin hecho en jQuery.

Cómo actúa el alias “this”

En jQuery “this” es el elemento del DOM que obtenemos mediante un selector. De tal manera que si nosotros hacemos esto: $(“p”) obtendremos TODOS los elementos de tipo “p” que se encuentren en nuestra página web, por lo que “this” representará a cada uno de los elementos obtenidos. En cambio al hacer lo siguiente $(“#miparrafo”) obtendremos que “this”  representará únicamente el elemento que se encuentre con la id  “miparrafo” en el DOM.

Una vez entendido esto, debemos comprender cómo es que se maneja a la hora de emplearlo en un plugin de jQuery.

Demos un ejemplo, si nosotros queremos que se le coloque un fondo de color rojo ( background-color: #FF0000 ) a cada uno de las etiquetas de tipo div que se encuentren en el DOM, tendremos que hacer lo siguiente: $(“div”) entonces “this” representaría a cada uno de los div que estén en la página, esto haría que “this” actuará como un arreglo o un objeto Node List.

Para poder aplicar la misma función a cada uno de los elementos que se encuentren en el alias “this” tendremos que utilizar la función “each”, que básicamente lo que hace es ejecutar las sentencias que se encuentren en el, por cada elemento que se encuentre en “this”. Lo cual quedaría de la siguiente manera en nuestro plugin:

return this.each(function(){

sentencias….

});

Si por ejemplo en el DOM únicamente se encuentran cuatro etiquetas de tipo div, las sentencias de la función “each” se ejecutarían cuatro veces (una por cada elemento traído).

Luego de comprender su función, las cosas se facilitarán un poco más. Bien, ahora regresemos al ejemplo anterior, si queremos aplicar un fondo de color rojo a cada uno de los div que se encuentren en el DOM haremos lo siguiente:

enrojo: function(){

return this.each(function(){

$(this).css({ ‘background-color’ : ‘#ff0000’ , });

});

}

Si observan un poco podrán ver que “this” se encuentra dentro de un selector de jQuery y esto es simplemente para identificar y obtener un único elemento en el DOM ya que como recordarán “this” obtiene cada uno de los elementos que están en el DOM. Si sólo obtuviéramos un elemento no tendríamos que emplear la función “each” y manejaríamos  “this” de la siguiente manera:

enrojo: function(){

return this.css({ ‘background-color’ : ‘#ff0000’ , });

}

Empleando éste ejemplo en un documento HTML quedaría de la siguiente manera:

$(document).on(“ready”, function(){
$(“div”).enrojo();
});

Empleando los nuevos conocimientos

A llegado la hora de programar un plugin en jQuery que nos sea de gran utilidad, esto con el propósito de mejorar y desarrollar nuestras habilidades con esté framework. En esta ocasión haremos un pequeño plugin, que muestre cuando un campo de un formulario ha sido validado correctamente. Para ello el nombre que le pondremos al archivo que contendrá nuestro plugin será jquery.validardatos_plugin.js

Una vez teniendo listo nuestro editor de texto, comenzaremos por codificar el plugin de la siguiente manera:

jqueryCoding

Como podrán ver en la imagen, la función “valida” será con la cual estaremos trabajando en el plugin. Y la que mandaremos a llamar desde un documento HTML (sin recibir parámetros).

jquery3

Aquí podemos ver como nuestra función “valida” se empleará en varios elementos del DOM, es por eso que haremos uso de “each” para aplicar los eventos a cada uno de los elementos (en este caso serán etiquetas de tipo input) que se obtienen en el alias “this”.

Luego creamos una variable $this que contendrá un elemento (campo) a la vez del DOM, pero como podrán darse cuenta tenemos otra variable, la variable “typ” que obtendrá como valor el tipo de campo que tiene como atributo nuestro elemento.

jquery4

Así que dependiendo del tipo de dato que se vaya a introducir se elige la manera adecuada a interactuar con el elemento o campo (para ser más específicos).

Ahora emplearemos expresiones regulares para validar los campos de una manera más rápida y versátil, para ello es necesario tener conocimientos de como se aplican, aunque en este caso no será muy importante ya que utilizaremos expresiones regulares muy básicas.

jquery5

La variable “expresion” tiene como valor una expresión regular de JavaScript, esta misma indica que la cadena con la cual se comparará deberá contener caracteres alfanuméricos  y que únicamente deberá tener de 8 a 10 caracteres.

Luego de saber cómo funciona la expresión regular que tenemos en nuestro código vamos a lo siguiente, podemos observar que hay una condición, en la cual se evaluará el valor de nuestro elemento mediante la expresión regular. Ahora, es importante saber que con el signo de exclamación (!) indicamos que si el  código que continúa de él devuelve un valor de tipo “boolean”; cambiará su valor al valor contrario, en caso de devolver “true” se cambiará a “false” y viceversa.

Después podrán notar que si se cumplen las especificaciones de la expresión regular cambiará de color el campo dependiendo si es correcto o no, deberá estar en color rojo si su valor o contenido no es alfanumérico y no contiene entre 8 y 10 caracteres, si esto se cumple el campo cambiará a color verde.

jquery6

En el siguiente ejemplo, empleamos las mismas funciones, pero esta vez en caso de ser un campo de tipo “email” se validará con una expresión regular diferente.

jquery7

Por último empleamos métodos similares en los campos de tipo “password” y creamos un “default” que se ejecutará en caso de que el campo no sea de ninguno de los anteriores.

Al finalizar nuestro plugin quedará de la siguiente manera:

(function($){

$.fn.extend({

valida: function(){

this.each(function(){

var $this = $(this);

var typ = $this.attr("type");

switch(typ){

case "text":

$this.focus(function(){

$this.keypress(function(){

var expresion = /^[a-z0-9ü][a-z0-9ü_]{7,14}$/;

var valor = $this.val();

if(!expresion.test(valor)){

$this.css({ "background-color" : "#e44e2d" });

}else{

$this.css({ "background-color" : "#00ff00" });

}

});

});

break;

case "email":

$this.focus(function(){

$this.keypress(function(){

var expresion = /^[0-9a-z_\-\.]+@[0-9a-z\-\.]+\.[a-z]{2,4}$/i;

var valor = $this.val();

if(!expresion.test(valor)){

$this.css({ "background-color" : "#e44e2d" });

}else{

$this.css({ "background-color" : "#00ff00" });

}

});

});

break;

case "password":

$this.focus(function(){

$this.keypress(function(){

var expresion = /^[a-zA-Z0-9]{8,10}$/;

var valor = $this.val();

if(!expresion.test(valor)){

$this.css({ "background-color" : "#e44e2d" });

}else{

$this.css({ "background-color" : "#00ff00" });

}

});

});

break;

default:

$this.focus(function(){

$this.keypress(function(){

var valor = $this.val();

if(valor == 0){

$this.css({ "background-color" : "#e44e2d" });

}else{

$this.css({ "background-color" : "#00ff00" });

}

});

});

break;

}

});

}

});

})(jQuery)

Crearemos un documento HTML y mandaremos a llamar a la función “valida()” para aplicarla en cada uno de los campos que se encuentran en el DOM.

jquery8

jquery9

Probemos nuestro sencillo plugin, en el navegador:

Prueba1

Llenando los campos incorrectamente.

Prueba2

Llenando los campos correctamente.

Espero este contenido haya sido de su agrado, y les sirva de gran utilidad al desarrollar sus aplicaciones web.

comments powered by Disqus