SummArg | Cursos y recursos para webmasters

03/02/2011

Notificaciones animadas muy facil con jNotify!

jNotify es un plugin para jQuery para desplegar notificaciones animadas con tan solo setear algunas opciones. Posee tres tipos de notificaciones: notificación exitosa, notificación de error y notificación de información. Como podemos apreciar en el demo, disponemos de la posibilidad de setear:

  • Autohide
  • Posición en la que aparece
  • Tamaño
  • Tiempo de muestra del mensaje
  • Tiempo en que se cierra/abre la animación
  • Color y opacidad del overlay
  • Posibilidad de añadir acciones para onClosed y onCompleted


Para instalar nuestras notificaciones animadas podemos crear un elemento añadiendole la clase “ejemplo” de la siguiente manera:

<a href="#" class="ejemplo">Clickear para ver jNotify</a>

Antes de cerrar el </body> deberemos linkear el script e inicializarlo, cuidando de seleccionar los valores deseados para el tipo de notificación:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("a.ejemplo").click(function(e){
			e.preventDefault();
			jNotify(
				'Mensaje del jNotify!!!<br />Podés escribir código HTML <strong>negrita</strong>, <i>itálica</i>, <u>subrayado</u>',
				{
					autoHide : true,
					clickOverlay : false,
					MinWidth : 250,
					TimeShown : 3000,
					ShowTimeEffect : 200,
					HideTimeEffect : 200,
					LongTrip : 100,
					HorizontalPosition : 'center',
					VerticalPosition : 'top',
					ShowOverlay : false,
					ColorOverlay : '#000',
					OpacityOverlay : 0.3,
					onClosed : function(){},
					onCompleted : function(){alert('jNofity completado!')}
				}
			);
		});
	});
</script>

El demo online nos permite seleccionar diferentes valores y, al presionar “Change options“, obtendremos el código JS para copiar y pegar en nuestro documento.

Descarga | Demo

Dejar un comentario