Android-style Simple jQuery Toast Plugin - eatoast
File Size: | 7.08 KB |
---|---|
Views Total: | 2775 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

eatoast is a tiny and simple to use jQuery plugin that creates Android-style toasts to display feedback messages (default, success, info, warning and danger) in a small popup.
How to use it:
1. Load the jQuery eatoast plugin's stylesheet for core toast styles.
<link href="src/jquery.eatoast.css" rel="stylesheet">
2. Load the jQuery eatoast plugin's script after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="src/jquery.eatoast.js"></script>
3. Create toast messages as follow:
// Default $('#demo-1').click(function(){ $.toast.show("This is a default toast."); }) // Success $('#demo-2').click(function(){ $.toast.success("This is a success toast."); }) // Info $('#demo-3').click(function(){ $.toast.info("This is a info toast."); }) // Warning $('#demo-4').click(function(){ $.toast.warn("This is a warning toast."); }) // Danger $('#demo-5').click(function(){ $.toast.danger("This is a dange toast."); })
4. Available options to customize your toast messages.
$.toast.show({ // How long the toast stays duration: 3000, // The text to be shown text: '', // The container of the toast. container: document.body, // The text color color: '#333', // The background color background: '#F5F5F5', // The toast boader's css value border: 'none', // The class you want to add on the toast. style: '', // Whether the toast will hide automatically. autoclose: true, // Show the close button closeBtn: false, // The width of the toast width: 'auto', // fade or slide animate: 'fade', // You can change whether the toast appear from the bottom or the top align: 'top', // The animation speed, number or jQuery.fx.speeds. speed: 'fast', // The opacity of the toast. opacity: 0.9, // The offset position, percentage or number. position: '20%' });
Change log:
2015-04-13
- small fix.
This awesome jQuery plugin is developed by HakurouKen. For more Advanced Usages, please check the demo page or visit the official website.