Android-style Simple jQuery Toast Plugin - eatoast

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.