debug_mode=ON

Buscar en

 
 

Escribir un plugin para jQuery (1 parte)

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

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

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.

Artículo disponible en mi blog

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.

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

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

Artículos Relacionados

Grupos relacionados

 
¡Votalo! 2 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? |