[Js] Mostrar notificaciones visuales con Toastr

Toastr es una libreria javascript para mostrar notificaciones web visuales, interactivas y con muchas opciones.

Es posible descargar el la libreria toastr desde el sitio web oficial, al final de este articulo les dejo el código que usare de ejemplo.

Que es toastr?

Como ya les había mencionado es una librería para crear notificaciones de 4 tipos: Informativas(info), exito(success), advertencia(warning) y error(danger), estas estan diferenciadas por diferentes colores como azul, verde, amarillo y rojo respectivamente.

Ademas toastr cuenta con muchas opciones por ejemplo:

  • Posicion donde va a aparecer la notificacion
  • Animacion de entrada y salida
  • Duracion de mostrar y tiempo en ocultar
  • Agregar un boton de cerrar
  • Mostrar barra de progreso del tiempo que falta para cerrar
  • Funcion en caso de hacer click a la notificacion
  • Entre otras

Es posible jugar con las opciones y obtener resultados geniales.

Instalacion y uso

Es facil de instalar y de usar.

Paso 1: Descargar el paquete necesario: archivos toastr.min.js y toastr.min.css

Paso 2: Descargar jquery

Paso 3: Agregar los archivo al documento html

<script type=”text/javascript” src=”jquery.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”toastr/toastr.css”>

<script type=”text/javascript” src=”toastr/toastr.js”></script>

Paso 4: Codificar el ejemplo.


toastr.options = {toastr.options = { "closeButton":true, "progressBar": true};

toastr.success("Hola, bienvenido al sistema!","Sistema Web");

Paso 5: Ejecutar en el navegador.

Descarga

A continuacion te dejo el codigo completo del ejemplo.

Es todo por ahora. Saludos

Leave a Comment

Your email address will not be published. Required fields are marked *