Como crear un plugin de jQuery

jQuery es mi framework favorito para trabajar en aplicaciones web. No solamente tiene un manejo excelente del DOM (Document Object Model) y de los eventos AJAX (Asynchronous JavaScript And XML) sino que también cuenta con una amplia comunidad que elabora plugins y complementos muy frecuentemente.
Es por eso que nosotros también debemos ser capaces de crear nuestro propio plugin jQuery ;)
Antes de empezar te recomiendo leer el tutorial de jQuery que nuestros amigos de Cristalab realizaron. Dicho tutorial está muy completo e incluso nos da un pequeño ejemplo de todo lo que podemos lograr con un par de líneas como en este ejemplo.


Debo agradecer la colaboración de Cristalab al permitirnos poder mencionar su excelente tutorial en este incipiente blog =D Vamos a lo nuestro entonces.
Para crear nuestro plugin, podemos extender de dos objetos:

• jQuery: que maneja la lógica interna de la librería,
• jQuery.fn: que maneja interacciones con los elementos visuales.

La diferencia entre ambos es que uno creará una función dentro del objeto jQuery mientras que la segunda opción creará un nuevo método para interactuar con los elementos del DOM.
Procedamos a crear nuestro primer ejemplo entonces: el típico HelloWorld!

jQuery.helloWorld = function(message){
     alert(message);
};

Nada más simple. el uso de dicho función será igualmente básico.

$.helloWorld('Probando nuestro primer plugin!');

Así agregamos items al objeto jQuery. Debemos ser cuidadosos de no reemplazar los ya existentes, esto nos traerá muchísimos problemas.
La segunda manera es la más interesante en mi opinión. Vamos a desarrollar como ejemplo un plugin que nos permita cambiar el option seleccionado de un select. Aún no entiendo porqué jQuery o Javascript no nos permite hacer esto de manera nativa con algún comando pero bueno, a resolver nuestro problema!

jQuery.fn.selectVal = function(val){
    this.each( function(){
        $this = $(this);
        var arrayTmp= new Array;
        for(contador=0; contador<$this.find('option').length; contador++){
            arrayTmp.push($this.find('option').eq(contador).val());
        }
        index = $.inArray(val,arrayTmp);
        if(index!=-1) $this.find('option').eq(index).attr("selected", "selected");
    });
};

La variable this representa al objeto del DOM que seleccionamos. Seguidamente creamos un array temporal que nos permita guardar los diferentes valores del select, que obtenemos a través de un simple for.

$this = $(this);
var arrayTmp= new Array;
for(contador=0; contador<$this.find('option').length; contador++){
    arrayTmp.push($this.find('option').eq(contador).val());
}

Luego, haciendo uso de la función inArray de jQuery, podremos saber el índice del valor en cuestión para seleccionarlo cambiando dicho atributo.

index = $.inArray(val,arrayTmp);
if(index!=-1)
    $this.find('option').eq(index).attr("selected", "selected");

El uso de este plugin es muy simple. El ejemplo de todo este código funcionando lo podemos ver en nuestro fiddle ;)

$('#select').selectVal(2);

Si es que planeas utilizar este plugin con otror frameworks, recuerda que jQuery tiene una función de encapsulación además de evitar conflictos con las demás librerias.

(function( $ ){
    // All you code goes here
})( jQuery );

Espero haberlos guiado a través de este pequeño tutorial básico para crear nuestro propio plugin. Recuerden que jQuery es muy potente así que la imaginación será nuestro límite.. eso y las barreras de los estándares =P

• Enlace página oficial de jQuery: http://jquery.com/
• Enlace Tutorialde jQuery Cristalab: http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/
• Enlace ejemplo jsFiddle: http://jsfiddle.net/fnaquira/zeRsD/