debug_mode=ON

Buscar en

 
 

Escribir un plugin para jQuery (2 parte)

Escrito por Indigo hace 1 meses . © Todos los derechos reservados
152 visitas. Etiquetas: javascript, pluging, jquery

Este artículo está disponible en microcode.es en el artículo titulado Escribir un plugin para jQuery (2 parte)

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.

Este artículo está disponible en microcode.es en el artículo titulado Escribir un plugin para jQuery (2 parte)

Regístrate o haz login para comentar, votar, y muchas cosas más.

Artículos Relacionados

Grupos relacionados

 
¡Votalo! 3 votos
¡Compártelo!

        

&nbps;
&nbps;

Indigo

Sobre Indigo

Hola, mi nombre es Indigo, comencé con el Framework 1.0 y hasta la fecha (aunque a las 3.5 no le he podido dedicar todo el tiempo que me gustaría).

 
Regístrate o haz login para participar.
¿Todavía no conoces debugmodeon?
debugmodeon es la red social para profesionales de la informática
descubre debugmodeon
 

 

© Copyright 2008-2009 debug_mode=ON | Aviso legal | Contacto | FAQ | ¿Quiénes somos? |