.: microcode.es :.

En mis anteriores artículos (Escribir un plugin para jQuery parte 1 y parte 2) sobre desarrollar un plugin para jQuery hemos visto como crear un plugin básico y como configurarlo dinámicamente. En esta ocasión vamos a ver como podemos disparar nuestros propios eventos y por ejemplo, que otro plugin actue en consecuencia.

Para esto vamos a seguir con el plugin que hemos desarrollado y que sirve para cambiar el estilo de nuestras cajas de texto cuando ésta tiene el foco y lo pierde.

Para usar eventos necesitamos tres cosas, el evento en si mismo (click, blur, focus), algo que lo lance y alguien que lo maneje (delegado). En jQuery el encargado de lanzar un evento es el método trigger y se hace de la siguiente manera

$(this).trigger('nombre_de_mi_evento', parametros_de_mi_evento);

Para manejar un evento se usa el método bind de la siguiente manera

$(this).bind(nombre_de_mi_eveto, function(e, data) {
// Código de la función que manejera mi evento. En la variable data tenemos los parameotros que hemos enviado en el trigger.
});

Aplicado esto a nuestro plugin, lo primero que haremos será crear un div donde iremos escribiendo todos lo eventos que vayamos manejando

<div id="status"></div>

y en nuestro fichero common.js pondremos los delegados

$('input').bind('myfocus', function(e, data) {
   var html = $('#status').html();
   html += 'onfocus<br />';
   $('#status').html(html);
});

$('input').bind('myblur', function(e, data) {
   var html = $('#status').html();
   html += 'onblur<br />';
   $('#status').html(html);
});

Luego sólo tendremos que modificar nuestro plugin para que lance los eventos

 $(this).focus(function() {
 	//...
    $(this).trigger('myfocus', "on focus");
	//...
 });
 $(this).blur(function() {
	//...
	$(this).trigger('myblur', "on blur");
	//...
 });

Con esto ya tendríamos nuestros propios eventos myfocus y myblur gestionados.

Tags: javascript, jquery, plugin