Crear nuestro primer plugin para jQuery

30 Sep

Últimamente estoy en medio del desarrollo de varios plugins para jQuery y supongo que mas de uno tendrá ganas de ponerse a ello pero no sabe por donde empezar. Pues vamos a empezar aquí mismo, con un sencillo plugin que hará la función de asignarle un texto a un input de texto, valga la redundancia, que al pulsar en el desaparezca y al salir de el vuelva a aparecer.

Aunque no hayáis entendido nada, os aseguro que es mas fácil de programar que de explicar.Mientras tanto os podéis descargar ejemplo.

Vamos al lió…

jQuery, toma los plugins como una extensión de la propia librería y los integra completamente con el resto de funciones. De esta manera, podemos ejecutar nuestro plugin igual que cualquier efecto en jQuery: $(‘.elemento’).plugin();

Esto facilita mucho las cosas y hace que podamos reutilizar nuestro código sencillamente.

Creando el plugin

Primero debemos crear el archivo, que según las especificaciones de jquery se debe llamar jquery.nombre.js. En nuestro caso jquery.textswitch.js y escribimos la base del plugin.

$.fn.textswitch = function(options) {

 return this.each(function() {

 });
};

Investigando por ahí me di cuenta de que no se puede usar el típico $ de jQuery dentro de los plugins ya que crea conflictos. Pero como jQuery es muy listo y tiene soluciones para todo, le podemos decir que use el alias $ para la función jQuery y todo vuelve a la normalidad.

(function($){
 $.fn.textswitch = function() {

 return this.each(function() {

 });
 };
})(jQuery);

Haciendo el plugin personalizable

Normalmente, cuando usamos un plugin, lo mas probable es que podamos pasarle opciones, como el color, tipo de efecto, etc. Estas opciones tienen un valor por defecto pero el usuario le puede pasar un valor cuando llama a la función. En nuestro caso el usuario podrá cambiar el texto a mostrar.

Las variables por defecto van dentro de la variable defaults y podemos añadir todas las que queramos separándolas con comas. Después añadimos todas esas variables por defecto al plugin usando $.extend.

(function($){
 $.fn.textswitch = function(options) {

 var defaults = {
 texto: "Buscar..."
 };
 var options = $.extend(defaults, options);

 return this.each(function() {

 });
 };
})(jQuery);

Metiéndonos en harina

Ya tenemos todo listo para empezar a programar la funcionalidad y para descubrir que es ese misterioso retorno de la función que dice this.each().

El this hace referencia al selector sobre el que aplicamos el plugin, por ejemplo, en $(‘.searchbox’).textswitch(); haría referencia a .searchbox.

El each hace referencia a cada uno de los elementos con ese selector que aparecen en nuestro HTML. De esta manera, el plugin la funcionalidad se aplicará a todos ellos.

Una vez entendido este, vamos a pasar a ver la funcionalidad, aunque tampoco quiero entrar mucho en detalle, ya que asumo que entendéis algo de jQuery y si no es así, dejad un comentario y empezamos rápido con un curso básico.

(function($){
 $.fn.textswitch = function(options) {

 var defaults = {
 texto: "Buscar..."
 };
 var options = $.extend(defaults, options);

 return this.each(function() {

 //asignamos el selector a obj
 obj = $(this);
 obj.attr({value: options.texto}).css({'color':'#888'});

 //Al entrar en el input, si el value es igual al
 //texto por defecto, se limpia.    
 obj.focus(function(){

 if (obj.val() == options.texto){

 obj.attr({value: ''}).css({'color':'#000'});

 }
 });
 //Al salir del input, si el value está vacío
 //se restaura el texto por defecto
 obj.blur(function(){

 if (obj.val() == ''){

 obj.attr({value: options.texto}).css({'color':'#888'});

 }
 });
 });
 };
})(jQuery);

Una vez tenemos nuestra funcion, solo nos queda iniciarlo como cualquier función de jQuery y asignarle nuestro texto por defecto.

$(document).ready(function(){

 $('.searchbox').textswitch();

});

Lógicamente, para que todo esto funcione deberá existir un input con la clase .searchbox y la librería jQuery y el plugin deberán estar cargados previamente.

Espero os haya servido de ayuda para empezar en el maravilloso mundo de los plugins o simplemente para echar un rato entretenido.

Links: Descargar ejemplo | Documentación jQuery

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: