Sunteți pe pagina 1din 10

(http://www.cristalab.com/)

Usuario Password
Usuario
Password

¿Olvidaste tu usuario o clave? (http://foros.cristalab.com/profile.php?mode=sendpassword)

Blog (http://www.cristalab.com/blog/) Foros (http://foros.cristalab.com/)

entra o registrate (http://foros.cristalab.com/profile.php?mode=register)

Publica un tutorial (http://foros.cristalab.com/posting.php?mode=newtopic&f=20)

» Tutoriales (/tutoriales/) / Crear plugins para jQuery

Crear plugins para jQuery

/ Crear plugins para jQuery Crear plugins para jQuery Por LunaticLycanthrop (http://www.lunatic.la100rra.com.mx)

Por LunaticLycanthrop (http://www.lunatic.la100rra.com.mx) el 09

de Septiembre de 2008 con 34,888 visitas.

HTML, CSS y Javascript (/tutoriales/4-html-css-y-javascript/) Otros

tutoriales por Lunatic Lycanthrop

(http://www.cristalab.com/usuario/10095-lunatic-lycanthrop).

jQuery, uno de los mejores frameworks para Javascript y AJAX que existen, puede ser facilmente extendido usando plugins. En este tutorial te mostraré como crear plugins para jQuery, desde lo más básico hasta la integración directa con la libreria.

El propósito de este tutorial es aprender a

Warning Lab Dom MFIII

False laboratory, false allegations high risk illegal Swiss treatments

falseswisslabdom.com

AJAX Java Framework

Develop database applications in no time. Free Tool. Download Now!

www.openxava.org

ASP.NET Calendar Control

Popup calendar & date/time picker Works for all version of ASP.NET

crear plugins para jQuery, con las

facilidades que la libreria ya trae. Antes de empezar te recomiendo leer el tutorial

de introduccion a jQuery (http://www.cristalab.com/tutoriales/214/tutorial-de-

jquery.html), si no conoces los conceptos basicos del lenguaje, y el tutorial de

programacion orientada a objetos en javascript

(http://www.cristalab.com/tutoriales/232/programacion-orientada-a-objetos-oop-con-

javascript.html), para que entiendas como ocurre todo a la perfeccion.

www.essentialobjects.com
www.essentialobjects.com

Objetos a extender

Para la creacion de plugins con jQuery, hay dos objetos básicos que se extenderan:

El objeto jQuery, que se encarga de practicamente todo el procesamiento interno y el objeto jQuery.fn, que es el que maneja la interaccion con elementos.

Si quisieramos crear una función general, usariamos jQuery, pero si quisieramos hacer uso de la potencia de los selectores built-in, usariamos jQuery.fn.

Creando el espacio de trabajo

Lo primero que tenemos que hacer es preparar un area de trabajo: Primero decidimos de que se tratará nuestro plugin. Con proposito de hacerlo sencillo creemos un plugin que alerte el texto (contenido) de un elemento cualquiera de diferentes formas. Acto seguido, creamos un archivo con el siguiente formato de nombre: jquery.nombre_del_plugin.js . Eso ayuda a identificarlo como plugin de jQuery.

Despues, creemos un archivo HTML en el que vinculamos la librería jQuery y nuestro plugin (que por ahora esta vacio). Ahora, abramos nuestro plugin en nuestro editor favorito (de texto plano, nada de Word), y comencemos la diversion.

Creando el objeto principal, sus metodos y propiedades

Te puede interesar

principal, sus metodos y propiedades Te puede interesar JQTouch, jQuery para desarrollo web móvil

JQTouch, jQuery para desarrollo

web móvil (/blog/jqtouch-jquery-

para-desarrollo-web-movil-c78223l/)

(/blog/jqtouch-jquery- para-desarrollo-web-movil-c78223l/) Sustituir un SWF por otro sin refrescar el HTML con Ajax

Sustituir un SWF por otro sin refrescar el HTML con Ajax

(/tutoriales/sustituir-un-swf-por-otro-sin-

el HTML con Ajax (/tutoriales/sustituir-un-swf-por-otro-sin- refrescar-el-html-con-ajax-c76818l/) E l f u t u r

refrescar-el-html-con-ajax-c76818l/) El futuro de Flash (/blog/el-futuro-

de-flash-c84378l/)

l o g / e l - f u t u r o - de-flash-c84378l/) Recargar

Recargar pagina al cerrar colorbox o nyroModal

(/tutoriales/recargar-pagina-al-cerrar-

colorbox o nyroModal (/tutoriales/recargar-pagina-al-cerrar- colorbox-o-nyromodal-c84855l/) con Javascript y jQuery C o

colorbox-o-nyromodal-c84855l/)

con Javascript y jQuery

Convertir un ENTER en un TAB

(/tutoriales/convertir-un-enter-en-un-tab-con-

javascript-y-jquery-c89132l/) Cómo crear un menú desplegable

javascript-y-jquery-c89132l/)

Cómo crear un menú desplegable

 

con Jquery (/tutoriales/como-crear-

c o n J q u e r y (/tutoriales/como-crear- un-menu-desplegable-con-jquery-c76388l/) E x p a n

un-menu-desplegable-con-jquery-c76388l/)

Expandir y contraer Flash con

Jquery (/tutoriales/expandir-y-

contraer-flash-con-jquery-c71607l/)

(/tutoriales/expandir-y- contraer-flash-con-jquery-c71607l/) Cómo crear un Popup con JQuery (/tutoriales/como-crear-un-

Cómo crear un Popup con

JQuery (/tutoriales/como-crear-un-

popup-con-jquery-c62546l/)

(/tutoriales/como-crear-un- popup-con-jquery-c62546l/) jQuery irá incluido en el Visual Studio de Microsoft

jQuery irá incluido en el Visual Studio de Microsoft (/blog/jquery-

ira-incluido-en-el-visual-studio-de-microsoft-

ira-incluido-en-el-visual-studio-de-microsoft- c 6 2 0 2 5 l / ) Cargar Google Analytics al

c62025l/) Cargar Google Analytics al terminar de cargar la página

(/tutoriales/cargar-google-analytics-al-

« Regresar a los tutoriales (/tutoriales/)

terminar-de-cargar-la-pagina-c63377l/)

Vamos a crear dos tipos de funciones, cada una con uno de los objetos a extender, solo por aprendizaje. De esta manera, escribamos en nuestro archivo lo siguiente:

jQuery.comprobarAlert = function( mensaje ){ alert(mensaje);

}

jQuery.fn.alerter = function(){ this.each( function(){ alert(this);

}

});

Analizemos esas funciones: La primera está extendiendo el objeto jQuery, creando una función con el nombre de comprobarAlert, cuyo propósito es muy simple: Pasar un parametro de mensaje, que sera alertado. Para probar la función vamos a nuestro HTML y añadimos las siguientes lineas a un tag script:

$(document).ready( function(){ $.comprobarAlert("Hola!");

});

Eso tiene que alertarnos "Hola!".

La segunda función es algo más completa. Cuando usamos jQuery.fn, el this hace referencia a un objeto jQuery que tiene "dentro" todos los elementos que recopila el selector. Entonces el each hace un bucle ejecutando la función para cada elemento, en este caso, alertando el objeto encontrado (todos los objetos encontrados, de hecho :P )

Para una representacion no tan abstracta, usemos un ejemplo concreto. Si en nuestro documento HTML tenemos lo siguiente

$(document).ready( function(){ $("#victima").alerter();

});

lo que le estamos diciendole al plugin es: Busca todos los elementos que tengan como id victima, y recogelos en una "lista" jquery. Luego, por cada elemento de esta lista, haz la función indicada, que es alertar el objeto (con alerter() ).

Nota: Es importante entender bien los ámbitos del this: Dentro de la función principal, el this hace referencia a la lista, mientras que dentro del each, el this hace referencia al elemento DOM ya seleccionado.

Extendiendo el plugin: Opciones

Ya tenemos la idea basica de como nombrar un plugin y ponerlo a funcionar. Ahora examinemos como podemos hacer que el plugin tenga opciones, para que el usuario defina su comportamiento como mejor le parezca.

Nota: Los codigos que aparecen a continuacion se ubican o bien en el archivo del plugin o en el documento HTML (en cada caso se especifica). Se sobreentenderá que lo que aparece en el HTML está dentro de $(document).ready(), es decir, que funciona cuando el DOM se ha cargado. Tambien pueden haber continuas referencias a un selector "#victima", correspondiente a un div en

nuestro documento HTML ( que debemos crear )

Añadamos a nuestro plugin de alerta la posibilidad de enviar una cadena adicional al comienzo y al final de el mensaje, sin que estos parametros adicionales sean obligatorios. Hay dos opciones: La primera es usar jQuery.extend, una función built- in de jQuery, pensada para proveer variables con valores "default", modificables por el usuario. La segunda es hacerlo sin ayuda de extend, que puede ser más entendible.

Primera opción:

jQuery.comprobarAlert = function( mensaje, opciones_user )

 

opciones_default = { inicio_str : "Alerta: ", final_str: " /fin "

 

}

opciones = jQuery.extend(opciones_default , opciones_u alert(opciones.inicio_str + mensaje + opciones.final_s

}

     
     
     

Segunda opción:

jQuery.comprobarAlert = function( mensaje, opciones_user ) if( opciones_user == undefined ){ opciones = ({ inicio_str : "Alerta: ", final_str: " /fin "

 

}); }else{ opciones = opciones_user;

 

}

alert(opciones.inicio_str + mensaje + opciones.final_s

}

     
     
     

La primera opcion es un poco abstracta pero es más compacta. La explicación es la siguiente: Para crear la variable opciones se llama jQuery.extend. Esta función asigna los valores del primer parametro a la variable si el segundo parametro esta vacio o es "undefined" (no esta definido). De tal manera, si el usuario no ingresa opciones se toman las predeterminadas, y si las ingresa, se sobreescriben.

La segunda opcion es mas o menos la explicacion de la primera: Se comprueba si el usuario mando opciones. Si no es asi, se toman las predeterminadas. Si el usuario mandó, se toman estas.

Es importante notar que las opciones quedan como propiedades del objeto "opciones", es decir, que para acceder a "inicio_str" tenemos que escribir "opciones.inicio_str". Para el resto del tutorial usaremos la primera forma, por la razón a continuación.

Usabilidad:

Si queremos que el usuario tenga control total del plugin, debemos proveer la capacidad de cambiar tanto los defaults para un llamado, como para todo el documento. Veamos este ejemplo de llamados:

// Aqui el mensaje va con opciones normales

 

$.comprobarAlert("Tengo opciones default");

// Aqui podemos cambiar el default:

$.comprobarAlert.op_default.inicio_str = "Wii: ";

 

//Y ejecutar el mismo llamado, que ahora dara un resultado $.comprobarAlert("Tengo opciones default");

     
     
     

Esto es particularmente útil para ser aplicado en escenarios diversos de manera sencilla. Supón que tienes un plugin que cambie el fondo de un elemento. El autor del plugin definió que el color normal de fondo es amarillo, pero tu pagina web es de tonos ocres, asi que te interesa que el color sea verde. Si no puedes controlar los defaults desde tu web, cada vez que quieras usar el codigo, deberás cambiar la llamada:

$("a").colorizar("fondo", ({ color: "verde"

}); $("body").colorizar("borde", ({ color: "verde"

});

En vez de eso, podrias hacer lo siguiente (con el metodo que ya casi explicaré):

$.colorizar.opciones.color = "verde":

 

$("a").colorizar("fondo");

 

$("body").colorizar("borde");

//E incluso, puedes cambiar el color de uno solo con el ov $("p").colorizar("texto", { color:"naranja"

});

 
     
     
     

La manera de lograr esta maravilla de la usabilidad (XD) es la siguiente (con nuestro ejemplo de alerter):

jQuery.comprobarAlert = function( mensaje, opciones_user )

 

// Primero creamos nuestra variable de opciones var opciones = jQuery.extend( jQuery.comprobarAlert.op alert(opciones.inicio_str + mensaje + opciones.final_s

}

jQuery.comprobarAlert.op_default = { inicio_str : "Alerta: ", final_str: " /fin "

 
 

}

     
     
     

Como verás, hemos dividido en dos la función. Al separar

"jQuery.comprobarAlert.op_default" hacemos que esté accesible desde cualquier parte. Asi que, como ya vimos, bastaría substituir el contenido de la variable para cambiar los defaults:

$.comprobarAlert.op_default = { inicio_str : "He reemplazado al default: ", final_str: ". Oh si."

}

o incluso cambiarlos por separado:

$.comprobarAlert.op_default.inicio_str = "Solo reemplazo e

     
     
     

Extensibilidad

Si queremos que el usuario final tenga todas las comodidades para usar nuestro plugin, podemos añadirle la extensibilidad. Si, digamos, nuestro plugin usara una función interna que transformara el texto de alguna manera, podemos tambien proveer una función "default", que el usuario pueda cambiar si necesita. Miremos el ejemplo:

jQuery.comprobarAlert = function( mensaje, opciones_user ) var opciones = jQuery.extend( jQuery.comprobarAlert.op // Aqui se llama a la función, que definimos extername var mensaje = jQuery.comprobarAlert.transformar(mensaj alert(opciones.inicio_str + mensaje + opciones.final_s

 

}

jQuery.comprobarAlert.op_default = { inicio_str : "Alerta:", final_str: " /fin "

 
 

}

// Esta es nuestra "función modificable" jQuery.comprobarAlert.transformar = function(texto){ return String( texto ).toUpperCase();

 
 

};

     
     
     

Como verás, estamos dejando que el contenido de la función sea modificable, de modo que podamos poner en nuestro html un reemplazo:

jQuery.comprobarAlert.transformar = function(texto){

return String( texto ).toLowerCase();

};

Por supuesto, hay que escoger bien las funciones que serán "abiertas": No se debe comprometer el funcionamiento del plugin. Para crear funciones que sean privadas, haremos lo que se muestra en el tutorial de poo en javascript:

// jQuery.comprobarAlert = function( mensaje, opciones_user ) var opciones = jQuery.extend( jQuery.comprobarAlert.op

 

function transformar(msj){ return String( msj ).toUpperCase();

 

}

// Aqui se llama a la función, que es privada var mensaje = transformar(mensaje);

 

alert(opciones.inicio_str + mensaje + opciones.final_s

}

//

     
     
     

De ese modo, nuestra función es inaccesible externamente.

Extendiendo el objeto jQuery

Hasta ahora hemos visto como modificar todos los aspectos de nuestro objeto plugin, ahora vamos a modificar el objeto jQuery.

Cuando a la función jQuery.extend se le pasa solo un parametro, y este es un objeto, esta extiende lo que la llamó. Esto nos permite por ejemplo, añadir un nuevo evento:

/* Si existieran pantallas holograficas donde los objetos pudiera dar el siguiente evento built-in en un browser

jQuery.fn.rozar = function(fun){ return this.each( // XD, IE demorará mucho implementando esto:

 
 

this.onrub = this.apply( fun );

 

);

};

// Y lo anterior se puede usar como

 

$(".holocube3dsuperdelux").rozar( function(){

 

$(this).css("z-index","3000");

});

     
     
     

Por supuesto, el evento usado arriba (onrub) y el escenario en si, son totalmente ficticios, pero la idea es que se entienda lo que se quiere lograr ;)

Uso del alias $

Hasta ahora en los codigos vistos, se ha hecho un gran uso del jQuery.talcosa, en vez de $.talcosa. Usar "jQuery.*" es beneficioso: Si el usuario tiene dos librerias js (algunas usan el $ tambien), jQuery no entrará en conflicto. Sin embargo usar solo "jQuery.*" es muy embarazoso para algunos, asi que hay una forma de usarlo en todos lados sin perder la compatibilidad con otros frameworks: Encapsular

funciones.

Si antes teniamos un codigo como:

jQuery.comprobarAlert = function( mensaje, opciones_user )

 

var opciones = jQuery.extend( jQuery.comprobarAlert.op var mensaje = jQuery.comprobarAlert.transformar(mensaj alert(opciones.inicio_str + mensaje + opciones.final_s

}

     
     
     

Eso se transforma a:

(function($) { $.comprobarAlert = function( mensaje, opciones_user ) var opciones = $.extend( $.comprobarAlert.op_defau var mensaje = $.comprobarAlert.transformar(mensaje alert(opciones.inicio_str + mensaje + opciones.fin

}

})(jQuery);

inicio_str + mensaje + opciones. fin } })(jQuery); con el uso del alias $, que es
inicio_str + mensaje + opciones. fin } })(jQuery); con el uso del alias $, que es

con el uso del alias $, que es mas elegante y compacto. En resúmen:

(function($) { // Aqui pones tu codigo, el cual puede hacer uso de $ })(jQuery);

pones tu codigo, el cual puede hacer uso de $ })(jQuery); Juntandolo todo: Ahora que hemos
pones tu codigo, el cual puede hacer uso de $ })(jQuery); Juntandolo todo: Ahora que hemos

Juntandolo todo:

Ahora que hemos visto todo ( o bastante de ) lo relacionado con plugins en jQuery, finalizemos nuestro cool plugin de comprobarAlert. Voy a cambiarle el nombre por uno corto (alerter) y lo implementaré como una extension al jQuery.fn, para usar selectores con él:

 

( function($) { $.fn.alerter = function(atributo, opciones_user){

 

// Ponemos la variable de opciones antes de la ite opc = $.extend( $.fn.alerter.opc_default, opciones

// Devuelvo la lista de objetos jQuery return this.each( function(){ var atrib = $(this).attr(atributo); var mensaje = $.fn.alerter.formato(atrib); alert( opc.inicial_str + mensaje + opc.final_s

});

};

$.fn.alerter.opc_default = { inicial_str : "Mensaje: " final_str : "."

 

};

$.fn.alerter.formato = function(texto){ var texto = String(text); var primera_letra = texto.substring(0,1); var resto = texto.substring(1, texto)length); return primera_letra+resto;

 

};

})(jQuery);

 
     
     
     

Con eso podemos desde nuestro html hacer el llamado:

$("#victima").alerter("id");

Lo que nos retornará "Mensaje: victima.". Si sobreescribimos los defaults con la siguiente llamada:

$.fn.alerter.formato = function(texto){ return String(texto).toUpperCase();

};

$("#victima").alerter("id", { inicial_str: "Alerta:", final_str: " ."

});

Nos retorna "Alerta:VICTIMA .".

Resumen / puntos a recordar:

Nombrar el plugin jquery.nombre.js jquery.nombre.js

Los métodos se añaden al objeto jQuery.fn, y las funciones al objeto jQuery./ puntos a recordar: Nombrar el plugin jquery.nombre.js Tener en cuenta los ámbitos de las variables

Tener en cuenta los ámbitos de las variables en el plugin (explicados arriba).al objeto jQuery.fn, y las funciones al objeto jQuery. Todos los metodos y funciones DEBEN terminar

Todos los metodos y funciones DEBEN terminar con ; o el codigo no funcionara al comprimirse.y las funciones al objeto jQuery. Tener en cuenta los ámbitos de las variables en el

Los métodos deben devolver el objeto jQuery (a menso de que se especifique lo contrario).Se debe hacer ciclo con los elementos usando "this.each", para producir codigo limpio y compatible.

Se debe hacer ciclo con los elementos usando "this.each", para producir codigo limpio y compatible.objeto jQuery (a menso de que se especifique lo contrario). Siempre usar "jQuery" en vez de

Siempre usar "jQuery" en vez de $ a menos de que se coloque la solucion ya mostrada.para producir codigo limpio y compatible. Tambien hay un patron de desarrollo, propuesto por Mike

Tambien hay un patron de desarrollo, propuesto por Mike Alsup, que trata de los puntos más importantes que hemos visto:

Usar un solo nombre en el objeto jQuery: No satures el objeto jQuery o jQuery.fn con muchos objetos distintos para un solo plugin. Usa solo un nombre (objeto), al cual le añades métodos y propiedadesque trata de los puntos más importantes que hemos visto: Aceptar un argumento de "opciones" para

Aceptar un argumento de "opciones" para controlar el pluginnombre (objeto), al cual le añades métodos y propiedades Proveer una manera de modificar los valores

Proveer una manera de modificar los valores default del plugin.un argumento de "opciones" para controlar el plugin Proveer acceso a modificar funciones del plugin cuando

Proveer acceso a modificar funciones del plugin cuando sea posibleuna manera de modificar los valores default del plugin. Mantener las funcione principales privadas. Soporte del

Mantener las funcione principales privadas.acceso a modificar funciones del plugin cuando sea posible Soporte del plugin Metadata (no cubierto en

Soporte del plugin Metadata (no cubierto en este tutorial, escribiré en el futuro sobre este)sea posible Mantener las funcione principales privadas. Referencia: Pagina de autoría de plugins en jquery.com

Referencia:

Pagina de autoría de plugins en jquery.com (http://jquery.com) : jquery.com (http://jquery.com):

http://docs.jquery.com/Plugins/Authoring

(http://docs.jquery.com/Plugins/Authoring)

Patrón de desarollo para plugins de jQuery con Mike Alsup:(http://docs.jquery.com/Plugins/Authoring)

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

(http://www.learningjquery.com/2007/10/a-plugin-development-pattern)

Me gusta
Me gusta

A 4 personas les gusta esto. Sé el primero de tus amigos.

javascript (/tags/javascript/) jquery (/tags/jquery/) plugins (/tags/plugins/)

Envía un comentario (#publicar)

(0)

(/tags/plugins/) Envía un comentario (#publicar) (0) Cómo cargar Google Maps de forma asíncrona.

Cómo cargar Google Maps de

forma asíncrona. (/tutoriales/como-

cargar Google Maps de forma asíncrona. (/tutoriales/como- Anular ENTER en formularios con JQuery

Anular ENTER en formularios

con JQuery (/tutoriales/anular-enter-

cargar-google-maps-de-forma-asincrona.- en-formularios-con-jquery-c64006l/)

en-formularios-con-jquery-c64006l/) Hacer que Tab cree tabulación en vez de saltar en TextArea

Hacer que Tab cree tabulación en vez de saltar en TextArea

(/tutoriales/hacer-que-tab-cree-tabulacion-en-

c63480l/)

vez-de-saltar-en-textarea-c90344l/)

c63480l/) vez-de-saltar-en-textarea-c90344l/) Publica tu comentario El autor de este artículo ha cerrado

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión (http://foros.cristalab.com/)

o puedes

¿Estás registrado en Cristalab y quieres publicar tu URL y avatar?

Inicia sesión

(#header)

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate

(http://foros.cristalab.com/profile.php?

mode=register)

Blog (http://www.cristalab.com/blog/)

Tutoriales de Flash (http://www.cristalab.com/tutoriales/0-flash-basico/)

Anime (http://www.cristalab.com/anime/)

Curso de Flash (http://www.cristalab.com/flash/)

Foros (http://foros.cristalab.com/)

Tutoriales (http://www.cristalab.com/tutoriales/) Ejemplos .fla (http://www.cristalab.com/ejemplos/)

Ejemplos .fla (http://www.cristalab.com/ejemplos/) Videotutoriales (http://www.cristalab.com/videotutoriales/)
Ejemplos .fla (http://www.cristalab.com/ejemplos/) Videotutoriales (http://www.cristalab.com/videotutoriales/)

Videotutoriales (http://www.cristalab.com/videotutoriales/)

Cursos (http://www.cristalab.com/cursos/)

Tags (http://www.cristalab.com/tags/)

Curso de HTML (http://www.cristalab.com/curso-html/)

Curso de HTML (http://www.cristalab.com/curso-html/) (http://www.cristalab.org/) Cristalab

(http://www.cristalab.org/)

Cristalab (http://www.cristalab.com/)

Consejos de amor (http://tiaxime.com)

Puls3.com (http://puls3.com)

Sube tus imágenes (http://l4c.me/)

dotGaia.com (http://dotgaia.com)