Videocast 3: creando un plugin para jQuery

28/ene/2009 11

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,, =)

  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.

Responder a Jorge Epuñan ×

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

CSSLab