This time I will share jQuery Plugin and tutorial about Advanced Toast Notification Plugin – jQuery Toasts.js, hope it will help you in programming stack.
A tiny, easy yet customizable jQuery Toast notification plugin to display sliding, stacked, non-blocking notification popups inspired by Android Toast.
How to use it:
1. Insert the stylesheet jquery.toasts.css
and JavaScript jquery.toasts.js
into the document.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< link rel = "stylesheet" href = "/path/to/jquery.toasts.css" /> |
3 |
< script src = "/path/to/jquery.toasts.js" ></ script > |
2. To display a toast, just define the toast message in the toast
attribute of a trigger element and the plugin will do the rest.
1 |
< button toast = "This is a basic toast" >Simple Toast</ button > |
3. Determine the time to wait before auto dismissing the toast message. Default: 5000ms.
1 |
< button toast = "This is a basic toast" toast-timeout = "1000" >Simple Toast</ button > |
4. Display a close button inside the toast message.
1 |
< button toast="This is a basic toast<a class = 'close' >×</ a >">Simple Toast</ button > |
5. You are also allowed to create toast messages programmatically:
1 |
$.toast( 'Example Toast!' ); |
2 |
$.toast( 'Example Toast!' , 1000); |
3 |
$.toast( 'Example Toast! <a class="close">×</a>' ); |
6. Execute a function when the user clicks on the toast message.
7. Execute a function when the user clicks on the toast message.
8. Execute a function when the user hovers over the toast message.
9. Execute a function when the cursor is moved out of the toast message.
Changelog:
2020-11-23
- big update for jquery-toasts.js
2020-11-21