Best Notification plugin for Javascript and jQuery (using iziToast)

aaNotification is the key part of any application.Notification help user to understand the application in a better way or we can say in  a new way. Notifications messages are helpful to get the exact feedback from visitors about the status success or failure of task being carried out.After a lot of research in found iziToast Notification plugin.It’s most Elegant, responsive, flexible and lightweight notification plugin with no dependencies and most important free.

Description:

  • 4 built in themes: info, warning, error and success.
  • Easy to add your own themes.
  • Custom icons.
  • Custom images.
  • Custom positions.
  • Auto close with a progress bar.
  • Custom CSS3 transitions.

Getting Started With iziToast:

  •  Install using NPM:
 npm install izitoast --save
  • Install using Bower:
bower install izitoast

After installing the plugin include the CSS files from the dist folder in the head section:

<link rel="stylesheet" href="iziToast.min.css">

Include the JS file before the scripts:

 <script src="iziToast.min.js" type="text/javascript"></script>

Done.Now the plugin is ready to use.

Examples:

  • Basic Example: Demo
iziToast.show({
    title: 'Hey',
    message: 'What would you like to add?'
});
  • Default Setting Example: Demo
iziToast.settings({
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    onOpening: function(){
        console.log('callback abriu!');
    },
    onClosing: function(){
        console.log("callback fechou!");
    }
});
  • Opens the toast. (Example with buttons). Demo
iziToast.show({
    theme: 'dark',
    icon: 'icon-person',
    title: 'Hey',
    message: 'Welcome!',
    position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
    progressBarColor: 'rgb(0, 255, 184)',
    buttons: [
        ['<button>Ok</button>', function (instance, toast) {
            alert("Hello world!");
        }],
        ['<button>Close</button>', function (instance, toast) {
            instance.hide({
                transitionOut: 'fadeOutUp',
                onClosing: function(instance, toast, closedBy){
                    console.info('closedBy: ' + closedBy); //btn2
                }
            }, toast, 'close', 'btn2');
        }]
    ],
    onOpening: function(instance, toast){
        console.info('callback abriu!');
    },
    onClosing: function(instance, toast, closedBy){
        console.info('closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'
    }
});
  • Closes the specific toast
var toast = document.querySelector('.toast');
 
iziToast.hide({
    transitionOut: 'fadeOutUp'
}, toast);
  • Destroy all toasts
iziToast.destroy();

Four predefined types that have icon and different colors:

  • Info
iziToast.info({
    title: 'Hello',
    message: 'Welcome!',
});
  • Success
iziToast.success({
    title: 'OK',
    message: 'Successfully inserted record!',
});
  • Warning
iziToast.warning({ title: ‘Caution’, message: ‘You forgot important data’, });
  • Error

iziToast.error({ title: ‘Error’, message: ‘Illegal operation’, });

Events

  • Capture when the toast is opening.
// You can compare by any option (id, class..)
 
document.addEventListener('iziToast-open', function(data){
    if(data.settings.class == 'test'){ // data.detail will have all toast settings.
        console.info('EventListener iziToast-open');
    }
});
  •  Capture when the toast is closing.
document.addEventListener('iziToast-close', function(data){
    if(data.settings.class == 'test'){
        console.info('EventListener iziToast-close');
        console.info(data.detail.closedBy);
    }
});

More Details: iziToast

Leave a Reply

Your email address will not be published.

www.000webhost.com