Notificaciones no bloqueantes y bonitas: Usando ToastR

Muchas veces queremos que nuestra aplicación web muestre alertas, notificaciones, avisos y errores de una manera personalizada. El problema de las típicas notificaciones que nos ofrece js son feas y bloqueantes. Felizmente hay una libreria js que nos permite hacer estas notificaciones agradables a la vista del usuario de una manera fácil. Esta librería se llama ToastR y la puedes descargar desde Github. Desde aquí nos bajamos el js y el css y lo integramos a nuestro proyecto. En esa página puedes ver también toda la documentación pero en este post te lo resumo un poco :).

- Una vez añadidos los archivos .js y .css de Toasr (ojo, este librería hace uso de jquery, asi que tambien es necesario que esta librería este en nuestro proyecto) a tu proyecto creamos una nueva página html y referenciamos a la hoja de estilos, a jquery y a toastr.js:

-Lo siguiente es crear unos cuantos botones dentro del body de nuestra página para ver los diferentes tipos de notificación que nos ofrece toastr.

 

Usando ToastR

-Y por ultimo escribir el siguiente script en la parte final de la página (aunque puedes escribirla donde quieras, pero por temas de optimización post que espero escribir más adelante se recomienda poner los scripts al final del todo.

Resumiendo,

• Descargamos el js y css de ToastR y lo añadimos al proyecto. 
• Luego creamos una nueva página y lo referenciamos al proyecto. 
• Creamos cuatro botones, cada con una función onclick() diferente.
• Y por ultimo creamos el script necesario para ejecutar la aplicación. En el documento.ready() de la página ponemos el siguiente código:

 
 toastr.options.closeButton = true;

Esto nos indica que las notificación podrán mostrar el boton de Cierre. En caso no lo quieras mostrar, le pones false y ya está :).

Y bueno el resultado es el siguiente:

Notificación Info

Notificación Warning

Notificación Succcess

Notificación Error

Como vean Toasr nos permite mostrar notificaciónes bonitas de una manera fácil. Además tambien ofrece otras propiedas para mostrar tu notificación de diferentes maneras, posiciones y animaciónes. Todo esto lo puedes ver en la documentación. Aquí te dejo un ejemplo

http://codeseven.github.io/toastr/demo.html

Que lo disfrutes, hasta la próxima.