Non-blocking Toast Notification In jQuery - ToasterJS
File Size: | 8.28 KB |
---|---|
Views Total: | 381 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
ToasterJS is a tiny jQuery plugin for creating toast-like notifications that disappear after a period of time set by the user.
More Features:
- Stackable or not.
- Auto dismiss or not.
- Custom positions.
How to use it:
1. Install the ToasterJS plugin as follows:
<script src="/path/to/cdn/jquery.min.js"></script> <link rel="stylesheet" href="src/toaster.css" /> <script src="src/toaster.js"></script>
2. To generate a basic toast, i.e upon clicking a button, call a $.toast function.
<button class="toaster"> Click Me </button>
$('.toaster').click(function(){ $.toast({ content: "I'm a toaster!" }) })
3. If you'd like to have the toasts to not fade away, disable the hideAfter property.
$('.toaster').click(function(){ $.toast({ content: "I'm a sticky toaster!", hideAfter: false }) })
4. Changing the position of the toasts is done by setting the position property to one of the available position classes:
- bottom-left
- bottom-right
- top-left
- top-right
$('.toaster').click(function(){ $.toast({ content: "I'm toasting in the corner!", position: "bottom-left" }) })
5. Enable or disable stacking of toast elements.
$.toast({ content: "I won't stack!", stacking: false })
6. You can even change the contents of the toast element to have other HTML elements.
$('.toaster').click(function(){ $.toast({ content: '<i class="icon-warning"></i> <a href="/">Toaster link!</a>', position: "bottom-left" }) })
This awesome jQuery plugin is developed by rosshatokay. For more Advanced Usages, please check the demo page or visit the official website.