Como muchos saben, a la mayoría se le hace fácil buscar en google y bajar un Plugin que haga cosas "mágicas", pero al momento de querer personalizarlo, adaptarlo o desear que se combine con otro plug in, es ahí cuando empezamos a llorar, buscando en todos los foros lo que necesitamos.
Pues ya para romper esto, vamos a aprender a crear nuestro propio plugin.
ADVERTENCIA: en nivel requerido para Diseñarlo es Avanzado , en este punto ya deben dominar los bucles o ciclos (loops), las condiciones, funciones básicas, retornos, comprender el DOM y saber activar la consola de JS de su navegador, de lo contrarío solo copiaran y pegaran el código sin entender que se hacen.
Tomando en cuenta que leyeron la advertencia, vamos haya
Nuestro primer plug in tendra la siguiente estructura:
Código Javascript :
$.fn.mensajito = function(){
console.log("Mensajito Llamado");
console.log(this);
}y para llamarlo, simplemente lo haremos como cualquier otro plugin.
Código HTML :
<input type="text" name="inTexto" id="inTexto">
Código Javascript :
$("#inTexto").mensajito();Pruebenlo
y eso es todo. ¿Apoco esperaban más? ¿Ya vieron lo que imprime en la consola? ¿Quieren más? , bueno vamos por más.
Ahora agregamos un poco a nuestro HTML para que podamos encontrar un elemento al cual agregarle un boton.
Código :
<div class="container"> <input type="text" name="inTexto" id="inTexto"> </div>
Ahora vamos a modificar nuestra función principal del plugin, como dato colocamos una condición que evita que cada vez que ocurra el evento ("focus") se agregue un botón de forma consecutiva.
Código Javascript :
$.fn.mensajito = function(){
var myInput = this; //$("#inTexto")
myInput.on("focus", function(){
var sendButton = $("<button>Enviar</button>");
if(myInput.next().is("button") == false){
myInput.parent().append(sendButton);
}
});
}Aquí es muy importante recordar que en la linea myInput = this, el this se convierte en el evento que esta llamando la función. ¿pero que tal si en vez de un input tenemos cientos? ¿que tal si no los quiero llamar con un ID?... -_____- les diré que no coman ansias y por el momento lo vamos a hacer para un elemento único.
Prueben y vean la magia, trate de dejar el código muy simple para que se explique por si solo.
¿Hermoso verdad? Por el momento no hemos modificado nada extra a algo que pudiéramos haber hecho con una simple función. Y tienen razón ese es el punto que un plugin es solo una función re utilizable, extensible y bueno algo extensible si agregamos una variable.
Código Javascript :
var settings = $.extend({buttonText : 'enviar'},options);La funcion $.extend, nos permite sobreescribir valores de un arreglo, asi como dejar intactos los que no sobre escribimos. (de hecho es la explicacion fea) para más información http://api.jquery.com/jquery.extend/
Ahora en ves de un codigo duro podemos colocar algo como:
Código Javascript :
var sendButton = $("<button>"+ settings.buttonText +"</button>");¿pero como cambiamos ese valor?. Si alguna vez utilizar un plugin de Jquery lo siguiente les será muy familiar.
Código Javascript :
$("#inTexto").mensajito({
buttonText : "Kawuabonga"
});Aún nos falta, más personalización y algunos eventos personalizados callbacks, etc... Pero todo a su tiempo, seguiré actualizando el Post con los nuevo cambios.
Aquí les dejo lo que llevamos hasta el momento funcionando:
http://jsfiddle.net/elporfirio/kVpN4/
