jueves, 1 de noviembre de 2012

Tutorial de desarrollo de plugins para jQuery


Desarrollar un plugin de jQuery es bastante sencillo, se los explico a través de un ejemplo de un plugin que desarrolle para una galería de imágenes apilables.

 1- Crear un archivo .js que incluirá el código de nuestro plugin (en este caso se llama stackGallery.js

 2 - Dentro de este archivo vamos a poner las lineas necesarias para que jQuery lo reconozca como plugin:


(function($){
    $.fn.stackGallery = function(options) {
        // definicion de metodos e inicializacion
        this.each(function() {
            // codigo principal de nuestro plugin
        });
        return this;
    };
})(jQuery);

3 - Algunas consideraciones a tener en cuenta:

Si queremos definir atributos por defecto es bueno definir al comienzo del código de nuestro plugin es bueno incorporarlos a los parámetros seleccionados por el usuario.

var defaults = {
    width: 300,
    height: 300,
    speed: 2000,
    onChange: ""
};
var options = $.extend(defaults, options);

Para invocarlo simplemente tenemos que agregar un llamado como el siguiente.


$("#gallery").stackGallery({speed: 3200});


Adjunto el código del ejemplo:  aquí
Pueden ver un ejemplo de uso aquí: www.galerts.net  

No hay comentarios:

Publicar un comentario