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
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="jquery.highlight.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="text1" type="text" />
<input id="text2" type="text" />
</div>
</form>
</body>
</html>
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.
January 29th, 2010 10:37 PM
[...] 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 [...]
February 2nd, 2010 2:04 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 [...]