Videocast 3: creando un plugin para jQuery

28/ene/2009 12

Ayer se me acerca un colega de trabajo con algunas preguntas relativas a un proyecto de cómo encontrar una solución a una funcionalidad utilizando jQuery. Papel y lápiz en mano, me puse a explicarle cómo imaginaba que sería, pero después pensé en cómo hacerlo mejor aún, con menos líneas de código y en los posible extensible, vale decir, que su mantención o posterior actualización implique poca o nula modificación.

Luego del trabajo salí a trotar y ¡ZAZ! La solución viene a mi cabeza. De vuelta la puse en práctica y decidí grabarla en un videocast, pero además de esa sencilla solución creí pertinente mostrar cómo a partir de una simple funcionalidad (o compleja, dependiendo de lo que hagan) pueden transformarla en un plugin configurable a partir de opciones, para jQuery.

Cuando creé mi primer plugin tuve bastante dificultad al no encontrar una documentación detallada, y espero con este aporte visual poner al alcance de quienes necesiten material didáctico para sus proyectos web. Hago el llamado también a que puedan compartir sus desarrollos libremente; sólo así podremos mejorar la calidad de los sitios web que vemos día a día. Como lo he hecho en otras ocasiones, pongo a disposición este mismo sitio para hacer un review y difundirlos.

Sebastián, espero haber solucionado tu problema, y feliz cumpleaños.

Comentarios

  1. chap [#]

    Estimado: el .mov no tiene audio, queria tener guardado el video. Gracias de todas formas, veré el streaming.

  2. Seba [#]

    Gracias Jorginho, si funciona perfect y si se entiende, o sea, quedo a prueba de dummies!! 😀

    Muy buena la forma en que explicas las funcionalidades de jQuery y gracias por la dedicatoria 😀

    chap: yo si escucho el mov con audio…

  3. Jorge Epuñan [#]

    @Chap: El .mov es universal usando Quicktime; aconsejo usar el QT Player para reproducirlo.

    @Seba: q bueno q se entiende y q te haya servido, ojala a mas de alguno lo ayude.

  4. Oropher [#]

    Muy buen videocast, esta muy entendible, ahora me toca probar a mi mismo jeje,, =)

    • darlehen ohne vorkosten haus [#]

      As a fellow crazy 3-dog owner, I hear ya! And yeah, FL might be great for no snow but it sure is bad for dog pests! We rarely needed flea meds before but now they are getting their monthly doses without fail!

  5. fugazi [#]

    hey esta muy bueno el videocast.
    pero tengo una pregunta, en que parte haz programado el plugin?
    yo soy usario de windows y no se en donde podria practicarlo 😛

  6. Jorge Epuñan [#]

    @fugazi: puedes utilizar cualquier editor de texto para comenzar a urgar en el codigo fuente; el mas utilizado es Dreamweaver pero hay muchos gratuitos y al parecer muy buenos; he escuchado q Notepad++ para Win anda bien.

    exito.

  7. fugazi [#]

    muchas gracias, esta mañana lo he practicado en dreamweaver y funciono de maravilla…
    ojala no pierdas el espiritu de seguir con estos videocast que son muy interesantes! 😉
    a ver si algun dia integras un plugin jquery en el css para aprender tambien!! :)

    saludos

  8. ralexismf [#]

    Magnifico, como dice @seba te quedo a prueba de dummies, y muy buena la recomendacion de compartir nuestros proyectos, muy buen ejemplo nos das compartiendo los tuyos. cia 😉

  9. stock [#]

    Excelente tutorial, realmente muy bueno.

    saludos

  10. Jorge Mudry [#]

    Hola Jorge (tocayo), quiero decirte que disfruto enormemente cuando alguien hace un videcast de algun tema en particular, si a eso le sumamos que el tema tratado es mas que interesante, mucho mejor y si encima esta en nuestro idioma…bueno ni que hablar! Asi que ante todo, MUCHAS GRACIAS por el tiempo y esfuerzo =).

    Te paso algunas modificaciones sobre el plugin que hiciste las cuales, a mi entender, mejorarian un poco la portabilidad:

    (function($){
    $.fn.banderas = function(options) {

    var
    defaults = {
    receptor: ‘#paises’
    },
    settings = $.extend({}, defaults, options);

    $(this).click(function(){
    $(settings.receptor).toggleClass($(this).attr(‘class’)).text($(this).text());
    });

    return this;
    }
    })(jQuery);

    Estos son algunas de las ventajas que veo al hacerlo de esta forma:

    * Puedo aplicarle el plugin a cualquier elemento, sin respetar la estrcutura ‘container a’. Esto me permite, por ejemplo, usar este plugin con elemntos li en lugar de a
    * Al usar toggleClass, evito eliminar cualquier clase que tenga previamente el receptor.
    * En lugar de usar el nombre de la clase como texto a mostrar, uso el mismo texto del elemnto. Esto me permite ser independiente del nombre de la clase, no tenes que formatear el texto (ponerle la mayuscula) por medio de CSS y ademas serviria para paises de dos (o mas) palabras como Hong Kong.
    * Retorno el objeto jQuery, por lo que el plugin permite el “encadenamiento” con otras funciones. Por ejemplo $(‘#menu a’).banderas().css(‘color’,’red’);

    Te mando un fuerte saludo y espero que mi humilde aporte te sirva, tanto a vos, como a los miles de seguidores que tienes.

    Bye!

  11. Jorge Mudry [#]

    Perdon, hago una correccion sobre mi codigo. No funciona usarlo con toggleClass, sino como lo has hecho tu:

    $(settings.receptor).removeClass().addClass($(this).attr(‘class’)).text($(this).text());

    Habria que ver si hay alguna forma de hacerlo sin que elimine las clases que tenia aplicadas anteriormente.

    Saludos.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab