Simple jQuery plugin: Enlaces con mensajes de 'Cargando'

LoadingMessage, es un pequeño plugin que hice en jQuery para brindar una retroalimentación al usuario que haya dado click sobre un enlace en la aplicación, este regresa un mensaje de cargando, el cual puede ser personalizado.

El objetivo de este plugin es evitar la repetición de código, naturalmente el plugin se puede extender aún más, ya que no funciona para formularios, solo para enlaces <a href=''> funciona con formularios agregando un id y title al botón (los datos no se envian de forma asíncrona, pero mostrará el mensaje de cargando).

jQuery Plugin:

$.fn.LoadingMessage = function (a){
var attr, loading,href;
$(this).click(function(event){
var href=$(this).attr('href');
if(a.attr=='text'){ if($(this).attr('title')!=''){ attr=$(this).attr('title'); } else { attr=$(this).text();}}
else if (a.attr=='url'){attr=href;}
loading = '<div id="'+a.css+'">'+a.text+' '+attr+'<\/div>';
$('body').prepend(loading);
if(a.type=='asyn'){
event.preventDefault();
$(a.loadhere).load(href, function() {
$('#'+a.css).remove();
});} });
return false; };

Cómo funciona:

$('#enlaces a').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading'
});

Aquí estoy diciendo que especificamente los enlaces dentro del #enlaces mostrarán el mensaje de cargando, claro puedo decir que todos los enlaces en mi aplicación muestren el mensaje con: $('a').

LoadingMessage funciona con los parametros:

1. text: es el mensaje que se enviará, en el caso del ejemplo dira Cargando.
2. attr: significa el atributo de el enlace, puede enviarse 2: url o text. Text significa que mostrará el título del enlace. Nota: Si <a title="'enlace'"> se mostrará lo que contenga el atributo title, si no lo tiene, toma el texto del enlace.
3. css: se envía el nombre del id del CSS, nuestro ejemplo se llamo a #loading. OJO no hay necesidad de escribir #.
   

Actualización (21/07/2009): se incluyó ejemplo con formulario.

Actualización (06/01/2011): agregue la función de cargas asíncronas / AJAX:

1. type: utilizado para hacer llamadas asíncronas / AJAX. Si se incluye con type:asyn, el contenido cargará en el div indicado sin refrescar el sitio.
2. loadhere: el div donde se cargará el contenido de manera asíncrona. Puede ser class o id.

Cómo funciona:

$('#enlaces a.asyn').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading',
type:'asyn',
loadhere:'#contenido'
});

VER EJEMPLOS >>

DESCARGAR ARCHIVOS >>