Toast Notification For Bootstrap – Toaster Plugin

File Size:9.31 KB
Views Total:574
Last Update:April 5, 2018
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

Toaster is a jQuery plugin for use bootstrap. when the users are wrong add input fields or invalid inputs then show toast notifications in your page.This intimate to user. which lets you create toast- and growl-style notification messages using Bootstrap alerts component.

How to use it:

  1.  The plugin requires jQuery library and Bootstrap:
    <link rel="stylesheet" href="/path/to/bootstrap.min.css">
    <script src="/path/to/jquery.min.js"></script>
    <script src="/path/to/bootstrap.min.js"></script>
    <script src="jquery.toaster.js"></script>
  2.  Config the toast notification :
    $.toaster({
    
      // toast message
      message : 'Your message here', 
    
      // toast title
      title : 'Your Title', 
    
      // or 'success', 'info', 'warning', 'danger'
      priority : 'danger'
      
    });
  3.  All default parameter script:
    $.toaster({
    settings : {
    
      'toaster'         :
        {
          'id'        : 'toaster',
          'container' : 'body',
          'template'  : '<div></div>',
          'class'     : 'toaster',
          'css'       :
          {
            'position' : 'fixed',
            'top'      : '10px',
            'right'    : '10px',
            'width'    : '300px',
            'zIndex'   : 50000
          }
        },
    
        'toast'       :
        {
          'template' :
          '<div class="alert alert-%priority% alert-dismissible" role="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
              '<span aria-hidden="true">×</span>' +
              '<span class="sr-only">Close</span>' +
            '</button>' +
            '<span class="title"></span>%delimiter% <span class="message"></span>' +
          '</div>',
    
          'defaults' :
          {
            'title'     : 'Notice',
            'priority'  : 'success',
            'delimiter' : ':'
          },
    
          'css'      : {},
          'cssm'     : {},
          'csst'     : { 'fontWeight' : 'bold' },
    
          'fade'     : 'slow',
    
          'display'    : function ($toast)
          {
            return $toast.fadeIn(settings.toast.fade);
          },
    
          'remove'     : function ($toast, callback)
          {
            return $toast.animate(
              {
                opacity : '0',
                padding : '0px',
                margin  : '0px',
                height  : '0px'
              },
              {
                duration : settings.toast.fade,
                complete : callback
              }
            );
          }
        },
    
        'debug'        : false,
        'timeout'      : 1500,
        'stylesheet'   : null,
        'donotdismiss' : []
        
    }
    });

    Done 🙂