En este tutorial aprenderás la base de cómo crear tus propias extensiones de jQuery para facilitar el desarrollo tanto a otras personas como a tí mismo. Crearlas, es más fácil de lo que pueda parecer en un principio y se no se requieren muchas líneas de código adicionales a un código Javascript normal.

Autor:

Intentando mejorar cada día en este mundo tan cambiante de la programación. Sígueme en Twitter o en GitHub. Actualmente estoy disponible para contratar.
Descarga Demostración

Entendiendo el concepto

En la creación de nuestro plugin, hay dos objetos que podemos extender, de entre los cuales debemos elegir según sea su fin:

  • El objeto jQuery se extiende cuando se necesita crear una función genérica que no necesita interactuar con los elementos DOM de la página. Cuando creamos una función bajo este objeto, la forma de llamarlo es $.mifuncion. Ejemplos de este tipo de funciones, tenemos por ejemplo las funciones de Ajax como $.post
  • El objeto jQuery.fn se extiende cuando queremos añadir métodos al “wrap” que jQuery hace a los objetos DOM. Cuando añadimos una función a este objeto, la forma de llamarlo sería $(domElement).mifuncion(). Con esto podemos añadir mucha funcionalidad a los elementos de nuestras páginas y pienso, que es lo más utilizado.

Una vez que sabemos que dos tipos de plugins podemos crear, vamos a recordar un par de cosillas antes de meter mano a los ejemplos:

  • Hay un patrón generalizado de la nomenclatura de los plugins: jquery.nombre_plugin.js
  • Lógicamente, siempre debes de incluír la librería jQuery antes del código de extensión.

Hay dos tipos de extensiones de jQuery: las que extienden funcionalidad al “wrap” de jQuery y las que crean funciones genéricas o globales bajo el espacio de nombres jQuery.

El método extend()

Este es el método que nos va a ayudar a incrementar funcionalidad a jQuery, pues todo el código de nuestro plugin debe de ir definido dentro de él. Por lo tanto si queremos añadir un método llamado red() que cambie el color de los elementos, esta sería la estructura:

jQuery.fn.extend(
    red: function(){
        /*Código aquí*/
    };
);

Con el código anterior ya podremos hacer cosas como esta: $(“body>div”).red();

Construyendo nuestro primer plugin

Vamos a seguir con él código anterior y vamos a crear un método que cambie a color rojo todos los elementos encapsulados dentro del objeto jQuery. Para ello vamos a usar el método genérico de jQuery llamado each(). Este método ejecuta una función en el contexto de cada elemento encontrado:

jQuery.fn.extend({
        red: function(){
            /*Recorre todos los elementos encapsulados*/
            this.each(function(){
                /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento
                DOM por el que se está pasando*/
                jQuery(this).css("color","#F00");
            });
        }
});

Fácil ¿no? Poco hay que decir respecto al código anterior, aunque puede que os llame la atención un detalle: se está usando jQuery en lugar de su alias $. Bien esto es algo importante pues tiene que ver con la consistencia del plugin.

Como muchos de vosotros habréis visto en nuestra introducción a Prototype, jQuery no es la única librería que usa el símbolo $ como alias, de modo que en jQuery se puede desactivar dicho alias para solventar problemas de conflictividad. Así que si el alias está desactivado y nuestro plugin lo usa…mal vamos ¿no? Seguid leyendo que más adelante os diré un truquillo para poder seguir usando el $ :)

Un ejemplo más elaborado

El ejemplo anterior, era una base para que podáis ver bien la estructura de un plugin. Ahora vamos a hacer un ejemplo un poco más grande para que podáis ver la funcionalidad, ya que el anterior carecía de esto.

En prácticamente todas las webs de hoy en día, se ve alguna caja de texto con un texto por defecto que al recibir el foco desaparece, volviendo a aparecer cuando el foco se pierde y la caja está vacía. El código es bastante sencillo puesto que solo hay que manejar dos eventos: focus() y blur(); pero vamos a hacer un plugin para jQuery para que sea todo más fácil:

jQuery.fn.extend({
        fijarTexto: function(texto,activeColor,disabledColor){
            /*Recorre todos los elementos encapsulados*/
            this.each(function(){
                /*Aquí se cambia el contexto, por lo que 'this' se refiere al elemento
                DOM por el que se está pasando*/
                var $this = jQuery(this); //Convertimos a jQuery
                /*Esto es para la primera vez*/
                $this.css("color",disabledColor).val(texto);
                /*Cuando recibe el foco, si está el texto por defecto, lo borra y cambia el color*/
                $this.focus(function(){
                    if($this.val() == texto){
                        $this.val("").css("color",activeColor);
                    }
                });
                /*Cuando pierde el foco, si está vacío, pone el texto por defecto y cambia el color*/
                $this.blur(function(){
                    if(jQuery.trim($this.val()).length==0){
                        $this.css("color",disabledColor).val(texto);
                    }
                });
            });
       }
});

Como podréis ver, nuestro plugin también cambia los colores de los inputs, ya que normalmente se le pone un colo mas clarito cuando se muestra el texto fijo, y se cambia a un color más visible cuando recibe el foco. De esta forma ahora podemos hacer lo siguiente:

$(document).ready(function(){
        $("#login").fijarTexto("Usuario","#000","#BCBCBC");
        $("#password").fijarTexto("Contraseña", "#000","#BCBCBC");
});

Una curiosidad, si os fijáis, se está usando el método jQuery.trim() para eliminar espacios al comienzo y al fin de los textos. Pues bien, esta función si la quisiésemos crear nosotros, la tendríamos que extender en: jQuery.extend({ trim: function(){} }); Este es otro ejemplo del otro tipo de plugins que se pueden hacer.
Podéis ver el ejemplo funcionando en la sección de demostración.

Truco: Usar el alias ‘$’ en nuestros plugins

Como lo prometido es deuda y dije que os lo mostraría, vamos allá. Está claro que no es un gran esfuerzo tener que escribir la palabra jQuery en lugar del típico $, pero cuando se está acostumbrado al alias, siempre se te acaba escapando. Lo que se hace en todos los plugins que he visto, es meter todo el código bajo una función y llamar a esta pasándole el objeto jQuery. Mejor un ejemplo:

function init_plugin($){
    $.fn.extend({/*código aquí*/});
}
init_plugin(jQuery);

Se entiende ¿no? Simplemente de esta forma tenemos la variable $ en un ámbito local. Si todavía no lo has entendido, mirátelo bien antes de seguir, leyendo…Vale, ahora que ya lo has entendido, vamos a ver como se hace en el mundo real de una forma más abreviada:

(function($){
    $.fn.extend({/*código aquí*/})
})(jQuery);

Este código es lo mismo que el anterior pero con una función anónima, y es así como debes hacerlo ;)

Reflexión final

Como podréis haber visto, hacer una extensión para jQuery solo requiere un par de añadidos a tus códigos y el resultado puede ser muy favorecedor para tus proyectos.

También deciros que esto no es todo sobre plugins para jQuery, pero no he querido mostrar todo en el mismo tutorial, de momento sólo lo más importante, el resto para otro tutorial, asique si queréis ver más no os olvidéis de seguirnos :D

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (15 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Muy claro el tutorial y fácil de seguir, muchas Iván! A ver si para el próximo tutorial que haga lo creo como plugin, en lugar de como código suelto :)

Mayly

gracias esta super lindo el tuturial es muy entendible gracias me ayudaste un monton

Mariajo

Muy buen tutorial, me voy a animar con esto de los plugin a ver si se me va dando mejor jquery

Muy bueno. Seguir así. Bien explicado y muy comprensible. Y encima en castellano.

Sobre el post, habrá que intentar utilizar algún día todos estos trucos. No está mal para dejar las funciones e ir empezando a organizar un poco más. Se podría hacer hasta algún “framework” con funciones propias y habituales, no??

Gracias Dani Salgueiro, me alegra que te haya gustado :D

Sobre lo que comentas del framework, claro que puedes o incluso deberías crear tu propio framework basado en jQuery si es la librería que más usas. De esta forma estarás mucho mejor organizado y podraś reaprobechar mejor tu código.

Un saludo

Pablo

Hola, muchas gracias por el tutorial, muy bueno.

Estoy empezando ahora con los plugins y quisiera hacerte una pregunta. Siguiendo el patrón para crear plugins que planteas, ¿Cómo podría crear métodos públicos bajo una clase principal?.

Por ejemplo, creo el plugin “color” como una clase:

jQuery.fn.extend({
color: function(){
this.each(function(){
/////// función principal
});
}
});

Y quiero que la clase “color” tenga métodos públicos accesibles así:

$(‘#div’).color.addColor();

¿Cómo creo esos métodos? He problado así:

jQuery.fn.extend({
color: function(){
this.each(function(){
/////// función principal
});
},
addColor: function(){
//////
}
});

Pero de esa forma addColor no es un método de la clase principal color. No se como hacerlo, si me puedes ayudar.

Muchas Gracias, Un saludo

Iván Guardado

@Pablo, la verdad que nunca había hecho ni visto nada parecido (lo que no quiere decir que esté mal). Te dejo la solución más sencilla a la que he llegado:
jQuery.fn.extend({
color: function(){
var me = this; //Guarda la referencia
return {
addColor : function(color){
me.each(function(){
$(this).css(“background”,color);
});
}
}
}
});

Si no entiendes algo pregunta que te lo explico. De esta forma puedes hacer lo siguiente:
$(“#texto”).color().addColor(“green”);
o si tienes que hacer varias operaciones, mejora guardar la referencia:
$colorManager = $(“#texto”).color();
$colorManager.m1();
$colorManager.m2();
……

NOTA: no lo he probado mucho por lo que puede contener errores, pero malo será :)

Un saludo

Jorge

Me ha gustado mucho. Conciso y claro, como debe ser.

Genial amigo estoy en el proceso de desarrollo de un plugin ya que no logro uno eficaz para lo que necesito muchas gracias por este tutorial

Derleth

Lo entendi todo, solo una pregunta… dices que en jquery se puede desactivar el alias “$” donde esta esa opcion?? como lo hago??

saludos

Hola Derleth, para desactivar el alias usa jQuery.noConflict() como puedes ver en la documentación:
http://api.jquery.com/jQuery.noConflict/

Alí Buenaño

Muy bueno el tutorial y el sitio.

Jorgen's

Felicidades me encanta esta pagina!

Griselda

EXCELENTE ADMIRO EL TIEMPO QUE LE DEDICAS A EXPLICAR TAN DETALLADAMENTE

scr ntpr

jQuery.fn.extend({
tufuncion: function(//parametros){
this.each(function(){
//tu codigo
});
return this; // esto es para encadenar ej.: $(‘.ho’).tufuncion().otrafuncion()
// si no lo pones tendras que seleccionar otra vez el obj para llamar otra funcion
}
});