Fluid Non-blocking Toast Message Plugin - jQuery Toastr

File Size: 142 KB
Views Total: 531
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fluid Non-blocking Toast Message Plugin - jQuery Toastr

Toastr is a small and simple jQuery notification plugin used to display toast-style non-blocking messages that auto disappear after a specified timeout.

How to use it:

1. Download and import the following JavaScript and CSS files into the document. Note that you first need to load the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="toastr.js"></script>

2. Initialize the Toastr library. In this example, the toast messages will be attached to the body.

$(function() {
  toastr.setup($('body'));
})

3. You can also specify the duration (default: 5000ms) & delay (default: 1000ms) during you initialize the plugin.

toastr.setup($('body'), 7000, 0);

4. Create a basic toast notification.

toastr.toast('This is a toast message');

5. Possible parameters for the toast method.

  • Message: Toast message
  • Priority: .danger or .warning
  • Button one: Button 1
  • Button two: Button 2
toastr.toast('Do you like jQuery?', false, {
  text: 'Yes',
  callback: function() {
    toastr.toast('How much do you like jQuery?', false, {
      text: 'Lots',
      callback: function() {
        toastr.toast('You like jQuery a lot!')
      }
    }, {
      text: 'A little',
      callback: function() {
        toastr.toast('You like jQuery a little')
      }
    });
  }
}, {
  text: 'No',
  class: 'danger', // or warning
  callback: function() {
    toastr.toast('You don\'t like jQuery');
  }
})

This awesome jQuery plugin is developed by Brydom. For more Advanced Usages, please check the demo page or visit the official website.