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.
[code language=”javascript”]toastr.options = {toastr.options = { "closeButton":true, "progressBar": true};
toastr.success("Hola, bienvenido al sistema!","Sistema Web");
[/code]Paso 5: Ejecutar en el navegador.
Descarga
A continuacion te dejo el codigo completo del ejemplo.
[sociallocker]Link: https://drive.google.com/open?id=1sa0LxRk9PpXBgbWZtT3yVrgdhBaoX_e8
[/sociallocker]Es todo por ahora. Saludos