(http://www.cristalab.

com/)

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

Usuario Password

entra

Blog (http://www.cristalab.com/blog/) Foros (http://foros.cristalab.com/) 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

Por Lunatic Lycanthrop (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,

Warning Lab Dom MFIII

False laboratory, false allegations high risk illegal Swiss treatments

puede ser facilmente extendido usando falseswisslabdom.com plugins. En este tutorial te mostrar como AJAX Java Framework crear plugins para jQuery, desde lo ms Develop database applications in no time. bsico hasta la integracin directa con la Free Tool. Download Now! libreria.
www.openxava.org

ASP.NET Calendar Control

Popup calendar & date/time picker Works for

El propsito de este tutorial es aprender a all version of ASP.NET www.essentialobjects.com crear plugins para jQuery, con las facilidades que la libreria ya trae. Antes de empezar te recomiendo leer el tutorial

Te puede interesar
JQTouch, jQuery para desarrollo web mvil (/blog/jqtouch-jquerypara-desarrollo-web-movil-c78223l/)

de introduccion a jQuery (http://www.cristalab.com/tutoriales/214/tutorial-dejquery.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-conjavascript.html) , para que entiendas como ocurre todo a la perfeccion.

Sustituir un SWF por otro sin refrescar el HTML con Ajax

(/tutoriales/sustituir-un-swf-por-otro-sinEl futuro de Flash (/blog/el-futurorefrescar-el-html-con-ajax-c76818l/) de-flash-c84378l/)

Objetos a extender
Para la creacion de plugins con jQuery, hay dos objetos bsicos 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 funcin general, usariamos jQuery, pero si quisieramos hacer uso de la potencia de los selectores built-in, usariamos jQuery.fn.

Recargar pagina al cerrar colorbox o nyroModal

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

Convertir un ENTER en colorbox-o-nyromodal-c84855l/) un TAB con Javascript y jQuery

(/tutoriales/convertir-un-enter-en-un-tab-conjavascript-y-jquery-c89132l/)

Cmo crear un men desplegable con Jquery (/tutoriales/como-crearJquery (/tutoriales/expandir-y-

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 librera 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.

un-menu-desplegable-con-jquery-c76388l/) Expandir y contraer Flash con contraer-flash-con-jquery-c71607l/)

Cmo crear un Popup con JQuery (/tutoriales/como-crear-unpopup-con-jquery-c62546l/)

jQuery ir incluido en el Visual Studio de Microsoft (/blog/jqueryira-incluido-en-el-visual-studio-de-microsoft-

Cargar Google Analytics al c62025l/) terminar de cargar la pgina

(/tutoriales/cargar-google-analytics-alRegresar a los tutoriales (/tutoriales/) terminar-de-cargar-la-pagina-c63377l/)

Creando el objeto principal, sus metodos y propiedades

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 funcin con el nombre de comprobarAlert, cuyo propsito es muy simple: Pasar un parametro de mensaje, que sera alertado. Para probar la funcin vamos a nuestro HTML y aadimos las siguientes lineas a un tag script: $(document).ready( function(){ $.comprobarAlert("Hola!"); }); Eso tiene que alertarnos "Hola!". La segunda funcin es algo ms 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 funcin 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 funcin indicada, que es alertar el objeto (con alerter() ). Nota: Es importante entender bien los mbitos del this: Dentro de la funcin 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 ) Aadamos 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 funcin builtin de jQuery, pensada para proveer variables con valores "default", modificables por el usuario. La segunda es hacerlo sin ayuda de extend, que puede ser ms entendible.

Primera opcin:
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 opcin:
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 ms compacta. La explicacin es la siguiente: Para crear la variable opciones se llama jQuery.extend. Esta funcin 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 razn a continuacin.

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. Supn 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, debers 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 vers, hemos dividido en dos la funcin. Al separar

"jQuery.comprobarAlert.op_default" hacemos que est accesible desde cualquier parte. Asi que, como ya vimos, bastara 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 aadirle la extensibilidad. Si, digamos, nuestro plugin usara una funcin interna que transformara el texto de alguna manera, podemos tambien proveer una funcin "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 funcin, 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 "funcin modificable" jQuery.comprobarAlert.transformar = function(texto){ return String( texto ).toUpperCase(); };

Como vers, estamos dejando que el contenido de la funcin 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 sern "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 funcin, que es privada var mensaje = transformar(mensaje); alert(opciones.inicio_str + mensaje + opciones.final_s } //...

De ese modo, nuestra funcin 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 funcin jQuery.extend se le pasa solo un parametro, y este es un objeto, esta extiende lo que la llam. Esto nos permite por ejemplo, aadir 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);

con el uso del alias $, que es mas elegante y compacto. En resmen: (function($) { // Aqui pones tu codigo, el cual puede hacer uso de $ ... })(jQuery);

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 Los mtodos se aaden al objeto jQuery.fn, y las funciones al objeto jQuery. Tener en cuenta los mbitos de las variables en el plugin (explicados arriba). Todos los metodos y funciones DEBEN terminar con ; o el codigo no funcionara al comprimirse.

Los mtodos 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. Siempre usar "jQuery" en vez de $ a menos de que se coloque la solucion ya mostrada. Tambien hay un patron de desarrollo, propuesto por Mike Alsup, que trata de los puntos ms 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 aades mtodos y propiedades Aceptar un argumento de "opciones" para controlar el plugin Proveer una manera de modificar los valores default del plugin. Proveer acceso a modificar funciones del plugin cuando sea posible Mantener las funcione principales privadas. Soporte del plugin Metadata (no cubierto en este tutorial, escribir en el futuro sobre este)

Referencia:
Pagina de autora de plugins en jquery.com (http://jquery.com):
http://docs.jquery.com/Plugins/Authoring
(http://docs.jquery.com/Plugins/Authoring)

Patrn de desarollo para plugins de jQuery con Mike Alsup: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

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

Me gusta

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

javascript (/tags/javascript/)

jquery (/tags/jquery/)

plugins (/tags/plugins/) Enva un comentario (#publicar) (0)

Cmo cargar Google Maps de forma asncrona. (/tutoriales/comocargar-google-maps-de-forma-asincrona.c63480l/)

Anular ENTER en formularios con JQuery (/tutoriales/anular-enteren-formularios-con-jquery-c64006l/)

Hacer que Tab cree tabulacin en vez de saltar en TextArea

(/tutoriales/hacer-que-tab-cree-tabulacion-envez-de-saltar-en-textarea-c90344l/)

Publica tu comentario
El autor de este artculo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro
Entra al foro y participa en la discusin (http://foros.cristalab.com/)

o puedes...
Ests registrado en Cristalab y quieres publicar tu URL y avatar?
Inicia sesin
(#header)

No ests registrado an pero quieres hacerlo antes de publicar tu comentario?

Registrate
(http://foros.cristalab.com/profile.php? mode=register)

Blog (http://www.cristalab.com/blog/) Foros (http://foros.cristalab.com/) Tutoriales (http://www.cristalab.com/tutoriales/) Tutoriales de Flash (http://www.cristalab.com/tutoriales/0-flash-basico/) Ejemplos .fla (http://www.cristalab.com/ejemplos/) Anime (http://www.cristalab.com/anime/) Videotutoriales (http://www.cristalab.com/videotutoriales/) Cursos (http://www.cristalab.com/cursos/) Curso de Flash (http://www.cristalab.com/flash/) Curso de HTML (http://www.cristalab.com/curso-html/) Tags (http://www.cristalab.com/tags/)
(http://www.cristalab.org/)

Cristalab (http://www.cristalab.com/) Consejos de amor (http://tiaxime.com) Puls3.com (http://puls3.com)

Sube tus imgenes (http://l4c.me/) dotGaia.com (http://dotgaia.com)