Growl-style Message Toaster with jQuery - Meow
| File Size: | 11.5 KB |
|---|---|
| Views Total: | 2485 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Meow is a lightweight jQuery plugin used to display growl-like toast messages on your web page. Supports both temporary and sticky toast notifications.
How to use it:
1. Include jQuery library together with the jquery.meow.css and jquery.meow.js on your web page.
<link rel="stylesheet" href="jquery.meow.css"> <script src="jquery.min.js"></script> <script src="jquery.meow.js"></script>
2. Show a basic toast message on page load, with a custom icon. The message will auto dismiss after a timeout (5000ms by default).
$.meow({
message: 'Your message here',
icon: '1.gif'
});
3. Show a sticky toast message that will always stay on your screen.
$.meow({
message: 'Your message here',
icon: '1.gif'
sticky: true
});
4. Show a toast message within a specified container.
$.meow({
message: 'Your message here',
icon: '1.gif'
container: '#target'
});
5. Full plugin options.
$.meow({
// Either a string or a jQuery selected element.
message: null,
// Either a string or a jQuery selected element.
title: null,
// Sets the image URL for the icon
icon: null,
// Sets the root element the meow should be contained within.
container: '#target',
// Sets the meow to never time out.
sticky: false,
// Determines whether the meow will have a close (×) button.
closeable: true,
// called just before the first meow on the screen is created
beforeCreateFirst: function(){},
// called just before any meow is created
beforeCreate: function(){},
// called right after a meow is created
afterCreate: function(){},
// called whenever a meow times out
onTimeout: function(){},
// called just before a meow gets destroyed
beforeDestroy: function(){},
// called right after a meow gets destroyed
afterDestroy: function(){},
// called after the last meow on the screen is destroyed
afterDestroyLast: function(){}
});
This awesome jQuery plugin is developed by zacstewart. For more Advanced Usages, please check the demo page or visit the official website.











