Press "Enter" to skip to content

A Simple jQuery Based Android Style Toast Plugin | eatoast

Eatoast is a simple jQuery-based plugin that creates an Android-style toast to display feedback messages (default, success, info, warning, and danger) in a small popup.

custom toast in android, how to display toast message in android, toast android example, android toast duration, toast view deprecated, toast setgravity not working

Bootstrap 5 Toast & Snackbar Easier to Use

How to make use of it:

1. Load the jQuery eatoast plugin stylesheet for basic toast styles.

<link href="src/jquery.eatoast.css" rel="stylesheet">

2. Load the jQuery eatoast plugin script after the jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="src/jquery.eatoast.js"></script>

3. Create toast messages as follows:

// 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. Options available 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%'

});

Android-style Simple jQuery Toast, jquery-eatoast Plugin/Github


See Demo And Download

Official Website(HakurouKen): Click Here

This superior jQuery/javascript plugin is developed by HakurouKen. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.