Notificación tostada moderna con sonidos y barras de cuenta regresiva-Toasty. js

Vista prévia

Descripción

Toasty. js es una biblioteca de notificación de JavaScript independiente para crear bonito, auto-descartable, CSS3 animado mensajes tostadas con sonidos y barras de cuenta regresiva.

Funcionamiento

Importe los archivos JavaScript y CSS a la página HTML.

<link href="toasty.min.css" rel="stylesheet">
<script src="toasty.min.js"></script>

Inicialice la biblioteca Toasty. js.

var myToast = new Toasty();

Crea notificaciones del sistema con diferentes tipos: información, éxito, ADVERTENCIA y error.

// info
toast.info("message here");

// success
toast.success("message here");

// warning
toast.warning("message here");

// error
toast.error("message here");

Establezca la animación que prefiera. Animaciones disponibles:

• fade (predeterminado)
• slideLeftFade
• slideLeftRightFade
• slideRightFade
• slideRightLeftFade
• slideUpFade
• slideUpDownFade
• slideDownFade
• slideDownUpFade
• pinItUp
• pinItDow

var myToast = new Toasty({


transition: "fade",
});

Más opciones de configuración con valores predeterminados.

var myToast = new Toasty({



// STRING: main class name used to styling each toast message with CSS:


// .... IMPORTANT NOTE:


// .... if you change this, the configuration consider that you´re


// .... re-stylized the plugin and default toast styles, including css3 transitions are lost.


classname: "toast",



 // STRING: name of the CSS transition that will be used to show and hide the toast:


transition: "fade",



// BOOLEAN: specifies the way in which the toasts will be inserted in the html code:


// .... Set to BOOLEAN TRUE and the toast messages will be inserted before those already generated toasts.


// .... Set to BOOLEAN FALSE otherwise.


insertBefore: true,



// INTEGER: duration that the toast will be displayed in milliseconds:


// .... Default value is set to 4000 (4 seconds).


 // .... If it set to 0, the duration for each toast is calculated by message length.


duration: 4000,



// BOOLEAN: enable or disable toast sounds:


// .... Set to BOOLEAN TRUE
- to enable toast sounds.


// .... Set to BOOLEAN FALSE - otherwise.


// NOTE: this is not supported by mobile devices.


enableSounds: false,



// BOOLEAN: enable or disable auto hiding on toast messages:


// .... Set to BOOLEAN TRUE
- to enable auto hiding.


// .... Set to BOOLEAN FALSE - disable auto hiding. Instead the user must click on toast message to close it.


autoClose: true,



// BOOLEAN: enable or disable the progressbar:


// .... Set to BOOLEAN TRUE
- enable the progressbar only if the autoClose option value is set to BOOLEAN TRUE.


// .... Set to BOOLEAN FALSE - disable the progressbar.


 progressBar: false,





// Yep, support custom sounds for each toast message when are shown


// if the enableSounds option value is set to BOOLEAN TRUE:


// NOTE: The paths must point from the project's root folder.


sounds: {




// path to sound for informational message:




info: "./dist/sounds/info/1.mp3",




// path to sound for successfull message:




success: "./dist/sounds/success/1.mp3",




// path to sound for warn message:




warning: "./dist/sounds/warning/1.mp3",




// path to sound for error message:




error: "./dist/sounds/error/1.mp3",


},



// The placement where prepend the toast container:


prependTo: document.body.childNodes[0]

});

Funciones de devolución de llamada.

var myToast = new Toasty({



// callback:


// onShow function will be fired when a toast message appears.


onShow: function (type) {},



// callback:


// onHide function will be fired when a toast message disappears.


onHide: function (type) {},

});

Registro de cambios

1.5.5 (10/29/2018)

• Bugfix