Un plugin es una utilidad que pone jQuery al alcance de los programadores para poder, de alguna manera, ampliar las posibilidades o funcionalidades ofrecidas por defecto. Es una función que se le agrega al objeto jQuery.
Una de las mayores ventajas que tiene utilizar un plugin es la reutilizacion del código escrito. Pero antes de seguir con explicaciones, veamos un pequeno ejemplo.
Creando el primer plugin
Crear un plugin en jQuery es muy sencillo, solo debemos agregar una función a la propiedad 'fn' del objeto jQuery. Pero antes de dar una explicación mas detallada, veamos un ejemplo:
Ahora que tenemos el plugin escrito, lo que tenemos que hacer el guardarlo... nosotros le pondremos como nombre 'agrandar.jquery.js'. Luego, habra que incluirlo en el head de nuestra pagina (de mas estr decir que debemos incluir tambien el framework jquery). Por ejemplo:
En practica:
Ahora si, tenemos todo listo para probar nuestro plugin. Si tenemos un elemento 'div' con la clase 'chiquito'... y luego escribimos:
Obtendremos lo siguiente:
Este pequeño código, agranda cualquier elemento, dandole un alto y un ancho de 100% de su contenedor, y ademas le da un color rojo de fondo.
Facil no?
Resumiendo, hacer un plugin significa agregarle una funcion al objeto jquery, de tal manera que, cualquier elemento que extendamos con el objeto jquery, podra responder a dicha funcion. En otras palabras, si escribimos por ejemplo:
Existen algunas reglas a tener en cuenta al momento de crear un plugin de jQuery... algunas de las mas importantes son:
- Cualquier plugin que escribas, debera llamarse jquery.[nombre_plugin].js, y dentro de ellas, cualquier referencia al objeto this sera una referencia al objeto que reciba el metodo (en este caso, agrandar).
- La funcion debe retornar el mismo objeto jquery sobre el cual se solicito.
- Se debe utilizar $(this).each() previendo de que el objeto sobre el cual se aplico el metodo, sea una coleccion de objetos. Esto sucede en los ejemplos ateriores, donde escribimos $('.miclase'). Puede suponerse que en una pagina habra mas de un elemento con esa clase, por lo que al usar ese tipo de selector, el objeto que obtenemos es una coleccion.
- Se debe terminar todas las instrucciones con un punto y coma ( ; ) de tal manera que el codigo pueda ser comprimido y aun asi seguir funcionando sin problemas.
Lo mas importante, es que puedes crear practicamente cualquier funcionalidad e incluirlo como un plugin.
Ahora, veamos una posibilidad que existe, y que es bastante interesante a la hora de escribir nuestros propios plugins...
Gestion de Opciones
Cuando hablamos de opciones hacemos referencia a un objeto que puede ser pasado como parametro al plugin de manera de hacerlo mas flexible y configurable. En el ejemplo anterior, usabamos nuestro plugin para agrandar cualquier elemento, pero al mismo tiempo le dabamos un color rojo de fondo.
Que pasaria si quisieramos elegin, en cada invocacion a la funcion, el color de fondo que debe tomar el/los elemento/s elegido/s?? o el tipo y ancho de borde?? o el color y tipo de letra??
Para responder todas estas preguntas, vamos a ver un ejemplo:
Notese que en este ejemplo, la funcion recibe un argumento llamado 'opciones', el cual es un objeto. Pero veamos donde crearlo...
Llamando a nuestro plugin con opciones
Lo primero que vamos a hacer es crear el objeto con las configuraciones que querramos:
Con esto, llamamos a nuestro plugin, pero ademas le pasamos un objeto con las configuraciones que debe tomar el elemento cuando se ejecute nuestra funcion. Con esto logramos, como dije antes, que nuestro plugin sea mas configurable, y no solo una funcion que siempre hace lo mismo. Mas claro, echale agua!!!
Pero vamos a ir mas alla aun
En el ejemplo anterior, le pasamos todos los valores que debe tomar el elemento al momento de ejecutarse la funcion. Pero que pasa si queremos darle a nuestro plugin configuraciones por defecto, y ademas darle la posibilidad a la persona que usa nuestro plugin de poder configurarlo tambien? Es decir, si se hace la siguiente llamada:
Nuestros elementos con clase 'chiquito' tomen un formato por defecto, con un determinado color de fondo, color de texto, tamano, etc... pero tambien, que el programador pueda escribir:
y de esta manera pasarle parametros personalizados.
La solucion a esto es una funcion de jQuery que se llama extend. Esta funcion, 'extiende' las propiedades de un objeto, con las propiedades de otro. Veamoslo en el plugin y luego explicamos como funciona.
y luego
Notese, que el primer argumento de la funcion extend, es el objeto 'base', es decir, a este objeto se le agregaran (o sobreescribiran) las propiedades que tenga el segundo. Con esto, se logra que el plugin tenga valores por defecto, pero en el caso que el programador le pase a la funcion un objeto con propiedades nuevas, se sobreescriban a las originales, y aquellas que no estaban definidas originalmente, pero si se pasaron como parametro, seran agregadas a las opciones.
En nuestro ejemplo, el objeto final (el que toma el elemento) queda de la siguiente manera:
Cualquier duda o comentario, no dudes en preguntar... y mientras tanto... a practicar lo aprendido.
Mucha suerte!
0 comentarios:
Publicar un comentario