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.
February 2nd, 2010 1:56 PM
[...] 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 [...]