Growl Style Message Toaster Plugin For jQuery - notify
File Size: | 48.1 KB |
---|---|
Views Total: | 9460 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin to present growl-like, easy customizable toast messages that provides 'info', 'error', 'warning', 'alert', and 'success' styles.
See also:
- Classic Growl-like Notification Plugin For jQuery - Gritter
- Cool Animated Notification Plugin with jQuery - jGrowl
- jQuery Plugin For Growl-style Notification System - notifications
- Tiny jQuery Plugin For Informative Messages In The Browser - Growler
- Growl-like Toast Notification Plugin with jQuery and Font Awesome - MsgPop
- Growl-like Notification Plugin with jQuery and Animate.css - iGrowl
- Animated Notification Plugin For jQuery and Bootstrap - Bootstrap Growl
How to use it:
1. Add reference to the latest jQuery JavaScript library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. Add reference to jQuery notify.js plugin's stylesheet.
<link href="css/jquery.notify.css" rel="stylesheet">
3. Add reference to jQuery notify.js plugin's script.
<script src="js/jquery.notify.min.js"></script>
4. Call the function to display a default alert box in the upper-right corner of the web page
notify({ //alert | success | error | warning | info type: "alert", title: "jQuery.Notify", //custom message message: "Super simple Notify plugin.", position: { //right | left | center x: "right", //top | bottom | center y: "top" }, // notify icon icon: '<img src="images/paper_plane.png" />', //normal | full | small size: "normal", overlay: false, closeBtn: true, overflowHide: false, spacing: 20, //default | dark-theme theme: "default", //auto-hide after a timeout autoHide: true, // timeout delay: 2500, // callback functions onShow: null, onClick: null, onHide: null, //custom template template: '<div class="notify"><div class="notify-text"></div></div>' });
Change log:
2015-01-22
- update.
This awesome jQuery plugin is developed by CreativeDream. For more Advanced Usages, please check the demo page or visit the official website.