Como crear un plugin jQuery

En este artículo vamos a ver como crear un plugin jQuery de forma simple. El plugin que vamos a crear como ejemplo va a tener la funcionalidad de añadir campos extra a un formulario dinámicamente.

La idea es tener un formulario con varios campos donde se le da la oportunidad al usuario de añadir más campos de un tipo.

Entonces vamos a tener un formulario como el siguiente:

<form action="index.php" method="post">
    <p><label>Nombre</label>
    <input type="text" name="nombre" class="input" /></p>
    <p><label>Edad</label>
    <input type="text" name="edad" class="input" /></p>
    <p><label>Compra</label>
    <input type="text" name="compra1" class="input" /></p>

    <p><a href="#" id="morefields">Más campos</a></p>
    <p><input type="submit" name="send" value="enviar" /></p>
</form>

Fíjate que tenemos un formulario simple con varios campos de texto, un enlace y un botón de submit. El plugin lo vamos a hacer actuar con el link con id=»morefields» y con el input de «compra1″.

El enlace con id=»morefields» se va a encargar de llamar al plugin con el objetivo de añadir un nuevo campo al formulario.

Ahora vamos a crear nuestro plugin. Crearemos un nuevo archivo que llamaremos «jquery.morefields.js» y le añadiremos el siguiente contenido:

jQuery.fn.morefields = function(label, name, counter){
    $(this).each(function(){
        elem = $(this);
        elem.data("label", label);
        elem.data("name",name);
        elem.data("counter",counter);

        elem.click(function(e){
            e.preventDefault();
            elem = $(this);
            label = elem.data("label");
            name = elem.data("name");
            counter = elem.data("counter");
            data = '<p><label>' + label + ' ' + counter + ':</label><input type="text" name="' + name + counter + '" /></p>';
            counter++;
            elem.data("counter",counter);
            newlabel = $(data);
            elem.before(newlabel);
        });
    });
    return this;
}

El código anterior no es más que una función que recibe 3 parámetros: el label del campo, el nombre del campo y el indice, con el objetivo de añadir un campo extra al formulario.

En la cabecera de la página añadiremos la librería jQuery, el plugin y su llamada:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.morefields.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#morefields").morefields("Compra", "compra", 2);
});
</script>

Estamos esperando a que se pulse el enlace con id=»morefields» para llamar al plugin con sus 3 parámetros.

Ver ejemplo en funcionamiento