miércoles, 24 de junio de 2009

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'
});

4 comentarios:

Anónimo dijo...

HOLA ESTA EXCELENTE EL SCRIPT, PERO QUE SE TENDRIA QUE MODIFICAR PARA QUE FUNCIONE CON FORMULARIOS.

GRACIAS

Héctor Guedea dijo...

Que tal Anónimo,
Ya inclui un formulario en los ejemplos de esta entrada.

OJO: los datos no se envian de forma asíncrona, pero si mostrará el mensaje de cargando cada que des click en el botón del formulario.
Para su funcionamiento agrega un id y title en el botón, y además un nuevo controlador (ve el ejemplos de la entrada).

Un saludo

kmil0 dijo...

saludos!,
interesante tu pequeño plugin.
pero.. tengo una pregunta.

como eliminar del DOM el div despues de que cargue la pagina?

digamos que quiero que se muestre el mensaje mientras se genera un 'pdf' por ejemplo.

saludos!

y gracias!

Héctor Guedea dijo...

Hola

Actualicé el plugin para llamadas ASÍNCRONAS y solucione el problema de que se quedará el DIV de 'cargando' permanente.

Saludos!