Notify.js
Este es un plugin ligero, personalizable y facil de implementar para la gestión de notificaciones responsivas y minimalistas estilo toast:
Hecho en
Vanilla Js
Se integró TinyColor para el manejo de colores.
Ejemplos de uso:
Puedes probar el demo aquí.
Instalación:
<script src="/path/to/notify.min.js"></script>Opciones:
// Mostrando valores por defecto
var opciones = {
color: '#323232', // random, hex, rgb(a), nombre
position: 'right', // right, left
rounded: 0, // int, cantidad de pixeles a redondear los bordes
content: null, // String del mensaje
callback: null, // Función ejecutada al destruir el mensaje
speedAnimations: 200 // Velocidad de las animaciones (fadeIn/fadeOut)
timeout: 4000 // Tiempo para auto destrucción de notificación
}Creando notificaciones:
Básicas:
Notify('Esta es una notificación'); Personalizadas:
Notify({
content: 'Hola usuario',
color: 'random',
timeout: 1000
})
Notify({
content: 'Hey you...',
color: 'pink',
position: 'left',
rounded: true
})Usando callbacks
// Definición local:
Notify({
content: 'Hola usuario',
color: 'blue',
timeout: 5000,
rounded: true,
position: 'left',
callback: function() {
alert('Mensaje desde callback');
}
})
// Reutilizando funciones:
Notify({
content: 'Hola usuario',
color: 'blue',
timeout: 5000,
callback: foo
})
var foo = function () {
alert('Mensaje de prueba...');
}