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.
