jQuery Notice: un plugin para crear notificaciones tipo Growl

Existen varias tecnologías para mostrar notificaciones de manera no obstrusiva en nuestros escritorios, aplicaciones o navegadores, como las que podemos ver en Ubuntu, Gravity o WinAmp. Tanto Mumbles como Growl o Snarl tienen un funcionamiento y una apariencia similar.

Como esta técnica para mostrar información en directo a los usuarios en ese formato nos ha parecido muy interesante, nos pusimos a buscar plugins de jQuery que consiguiesen ese efecto y encontramos unos cuantos. Sin embargo, el que más nos llamó la atención fue el plugin jQuery Notice de Tim Benniks.

JavaScript

Éste es el código JavaScript que se ha utilizado en el ejemplo. El plugin simplemente amplía el framework jQuery, permitiéndonos activar un mensaje mediante una llamada a la función noticeAdd().

Una característica interesante de este plugin es que nos permite agregar una clase CSS al mensaje de aviso para poder darle estilo.

Por ejemplo, para el mensaje de error hemos agregado la clase .error y en el CSS sólo hemos tenido que añadir un color de fondo.

$(document).ready(function()
{
		jQuery.noticeAdd({
			text: 'Éste es una sencillo aviso que utiliza el plugin jQuery Notice. Haz clic en la X de la esquina para borrarlo.',
			stay: true
		});

	$('.add').click(function()
	{
		jQuery.noticeAdd({
			text: 'Este aviso hay que borrarlo haciendo clic.',
			stay: true
		});
	});

	$('.add2').click(function()
	{
		jQuery.noticeAdd({
			text: 'Este aviso se borra solo.',
			stay: false
		});
	});

		$('.add3').click(function()
	{
		jQuery.noticeAdd({
			text: '¡Esto es un aviso de error!',
			stay: false,
			type: 'error'
		});
	});

				$('.add4').click(function()
	{
		jQuery.noticeAdd({
			text: '¡Esto es un aviso de éxito!',
			stay: false,
			type: 'success'
		});
	});

	$('.remove').click(function()
	{
		jQuery.noticeRemove($('.notice-item-wrapper'), 400);
	});
});

HTML

<ul>
  <li class="add">Haz clic aquí para ver un aviso que tendrás que borrar</li>
  <li class="add2">Haz clic aquí para ver un aviso que desaparece solo</li>
  <li class="add3">Aviso de error</li>
  <li class="add4">Aviso de éxito</li>
  <li class="remove">Borrar todos los avisos activos</li>
</ul>

o bien los archivos del plugin.

Fuente: jQuery growl notification plugin [paper mashup]