This time I will share jQuery Plugin and tutorial about Minimal Toast Notification Plugin For jQuery – Toastem, hope it will help you in programming stack.
Toastem is a super tiny jQuery notification plugin which helps you show custom toast messages on your html page. By default the toast notifications will auto dismiss after 4 seconds. You can also close the notification manually by clicking on the message body. Currently comes with 3 notification types: normal, success, and error.
How to use it:
1. Load the jQuery Toastem plugin’s JS and CSS files in the html page which has jQuery library installed.
1 |
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> |
2 |
<script src="toastem.js"></script> |
3 |
<link rel="stylesheet" href="toastem.css"> |
2. Create a container with the ID of ‘toastem’ to place your toast messages.
1 |
<div id="toastem"></div> |
3. Create toast notifications with custom messages as follow:
1 |
toastem.normal("Normal Alert"); |
2 |
toastem.success("Sucess Alert"); |
3 |
toastem.error("Error Alert!"); |
4. To trigger the notification you need to call it from any element with the correct id.
1 |
<button id="normal-alert">Normal Alert</button> |
2 |
<button id="success-alert">Success Alert</button> |
3 |
<button id="error-alert">Error Alert</button> |
5. By default, the toast messages will appear at the top right of your webpage just like growl notifications. You’re able the place them anywhere on the webpage like this:
This awesome jQuery plugin is developed by deleonn. For more Advanced Usages, please check the demo page or visit the official website.
