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

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.