.: microcode.es :. » plugin

Escribir un plugin para jQuery (3 parte)

Indigo — Tue, 02 Feb 2010 13:56:34 +0000

En mis anteriores artículos (Escribir un plugin para jQuery parte 1 y parte 2) sobre desarrollar un plugin para jQuery hemos visto como crear un plugin básico y como configurarlo dinámicamente. En esta ocasión vamos a ver como podemos disparar nuestros propios eventos y por ejemplo, que otro plugin actue en consecuencia.

Para esto vamos a seguir con el plugin que hemos desarrollado y que sirve para cambiar el estilo de nuestras cajas de texto cuando ésta tiene el foco y lo pierde.

Para usar eventos necesitamos tres cosas, el evento en si mismo (click, blur, focus), algo que lo lance y alguien que lo maneje (delegado). En jQuery el encargado de lanzar un evento es el método trigger y se hace de la siguiente manera

$(this).trigger('nombre_de_mi_evento', parametros_de_mi_evento);

Para manejar un evento se usa el método bind de la siguiente manera

$(this).bind(nombre_de_mi_eveto, function(e, data) {
// Código de la función que manejera mi evento. En la variable data tenemos los parameotros que hemos enviado en el trigger.
});

Aplicado esto a nuestro plugin, lo primero que haremos será crear un div donde iremos escribiendo todos lo eventos que vayamos manejando

y en nuestro fichero common.js pondremos los delegados

$('input').bind('myfocus', function(e, data) {
   var html = $('#status').html();
   html += 'onfocus
';
   $('#status').html(html);
});

$('input').bind('myblur', function(e, data) {
   var html = $('#status').html();
   html += 'onblur
';
   $('#status').html(html);
});

Luego sólo tendremos que modificar nuestro plugin para que lance los eventos

 $(this).focus(function() {
 	//...
    $(this).trigger('myfocus', "on focus");
	//...
 });
 $(this).blur(function() {
	//...
	$(this).trigger('myblur', "on blur");
	//...
 });

Con esto ya tendríamos nuestros propios eventos myfocus y myblur gestionados.

Escribir un plugin para jQuery (2 parte)

Indigo — Fri, 29 Jan 2010 22:37:16 +0000

Lo más normal es que cuando escribamos un plugin para jQuery (o cualquier otro trozo de código reutilizable) lo dotemos de alguna forma para poder configurarlo dependiendo de las necesidades de cada momento.

Siguiente con el ejemplo de mi artículo anterior “Escribir un plugin para jQuery (1 parte)” veremos como dotar al plugin de esta capacidad de configuración. En este caso configuraremos el color del fondo, asi como el borde de nuestros textbox, tanto cuando tiene foco (focus) como cuando no lo tiene (blur). El código para guardar estos valores es así

$.fn.highlight.defaults = {
   focusbackground: '#EFF5FF',
   focusborder: 'solid 1px #73A6FF',
   blurbackground: '#EEEEEE',
   blurborder: 'solid 1px #DFDFDF'
};

Para permitir que nuestro plugin admita parametros de configuración usaremos un parametros en la llamada del plugin donde pasaremos los valores que queramos

$.fn.highlight = function(options) {
   var opts = $.extend({}, $.fn.highlight.defaults, options);
   // Resto del código
}

Juntándolo todo tendríamos lo siguiente

(function($) {
    $.fn.highlight = function(options) {
        var opts = $.extend({}, $.fn.highlight.defaults, options);
        this.each(function() {
            var obj = $(this);
            // Valores por defecto
            obj.css('background', opts.blurbackground);
            obj.css('border', opts.blurborder);

            obj.focus(function() {
                obj.css('background', opts.focusbackground);
                obj.css('border', opts.focusborder);
            });

            obj.blur(function() {
                obj.css('background', opts.blurbackground);
                obj.css('border', opts.blurborder);
            });
        });
    };

    $.fn.highlight.defaults = {
        focusbackground: '#EFF5FF',
        focusborder: 'solid 1px #73A6FF',
        blurbackground: '#EEEEEE',
        blurborder: 'solid 1px #DFDFDF'
    };
})(jQuery);

Para hacer la llamada a nuestro plugin tan sólo hay que hacer lo siguiente

$().ready(function() {
    $('input').highlight({
        blurborder: 'red'
    });
});

Para la próxima entrega dejaremos otros detalles que podemos hacer para mejor el plugin y así aprender un poco mas de jQuery.

Escribir un plugin para jQuery (1 parte)

Indigo — Wed, 27 Jan 2010 20:25:09 +0000

Durante el último año una de las cosas que más gratamente me ha sorprendido es jQuery y jQuery UI. Con muy poco código tenemos toda la potencia de javascript para poder hacer autenticas maravillas en cliente. Toda esta funcionalidad puede ser extendida mediante plugins.

En la página de jQuery tener un gran cantidad de plugins preparados para ser usados en nuestra página con muy poco esfuerzo. Pero, ¿y si queremos hacernos un plugin personalizado? Pensé que hacer un plugin sería algo costoso y que requeriría de tener muchos conocimientos de javascript y jQuery, pero nada más lejos de la realidad. Para demostrarlo he hecho un pequeño plugin que cambia el estilo de todos las cajas de texto (inputs) cada vez que capture el foco y lo deje en un valor inicial cuando lo pierda. Para comenzar el plugin lo primero que tenemos que hacer es extender el propio objeto jquery para añadir nuestra funcionalidad (método). La forma de hacer esto es la siguiente

(function($) {
    $.fn.highlight = function(options) {
		// Nuestro método es 'highlight' y el código va a partir aquí.
    };
})(jQuery);

Bien, con esto ya podríamos llamar a nuestro código de la siguiente manera

$().ready(function() {
    $('input').highlight();
});

Este código llama a nuestro método para todos los ‘inputs’ (la potencia de jQuery es casi infinita) de nuestra página una vez que ésta esté disponible.

Volviendo a nuestro método, el código para cambiar los estilos de las cajas de texto quedaría de la siguiente manera

obj.focus(function() {
	obj.css('background', '#EFF5FF');
	obj.css('border', 'solid 1px #73A6FF');
});

obj.blur(function() {
	obj.css('background', '#EEE');
	obj.css('border', 'solid 1px #DFDFDF');
});

Juntándolo todo tenemos

(function($) {
    $.fn.highlight = function(options) {
        this.each(function() {
            var obj = $(this);
            // Valores por defecto
            obj.css('background', '#EEE');
            obj.css('border', 'solid 1px #DFDFDF');

            obj.focus(function() {
                obj.css('background', '#EFF5FF');
                obj.css('border', 'solid 1px #73A6FF');
            });

            obj.blur(function() {
                obj.css('background', '#EEE');
                obj.css('border', 'solid 1px #DFDFDF');
            });
        });
    };
})(jQuery);

Todo esto lo guardamos en un fichero con la extensión .js. Segun las buenas practicas nuestro plugin debería estar en un fichero con el nombre jquery.highlight.js.

El código que llama a nuestro plugin lo he puesto en un archivo llamado common.js, por lo que juntándolo todo en nuestra página aspx (o html) quedaría

Como vemos, crear nuestro primer plugin en jQuery ha sido muy sencillo. Próximamente veremos como podemos personalizar aun más nuestro script para que admita parámetros.