Android Style Toast Message Plugin For jQuery - ToastJS

File Size: 10 KB
Views Total: 1192
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Android Style Toast Message Plugin For jQuery - ToastJS

ToastJS is a lightweight (~3kb minified) jQuery based notification library used to display Google & Android style toast notifications that allow for queuing toast messages.

How to use it:

1. Include the needed jQuery JavaScript library and the toast.min.js script on your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="path/to/toast.min.js"></script>

2. Create a basic toast message using Toast.show() method with default parameters.

Toast.show({
  message  : "This is a <b>Toast</b> message."
}); 

3. Configuration options.

position    : Toast.POSITION_BOTTOM,
duration    : Toast.DURATION_NORMAL,
align       : Toast.ALIGN_CENTER,
class       : Toast.DEFAULT_CLASS,
background  : '#000000',
color       : '#ffffff',
opacity     : '0.6',
radius      : '16', // border radius
fontSize    : '14px',
appearTime  : 0.3, // seconds
message     : '',
top         : '40px', 
left        : '40px' 

4. Configuration options.

DEFAULT_CLASS   : 'toast-item',

/*
 * Duration variables in milis
 */
DURATION_LONG   : 4000,
DURATION_NORMAL : 2000,
DURATION_SHORT  : 1000,

/*
 * Position variables
 */
POSITION_TOP    : 'top',
POSITION_BOTTOM : 'bottom',
POSITION_MIDDLE : 'middle',

/*
 * Align variables
 */
ALIGN_CENTER    : 'center',
ALIGN_LEFT      : 'left',
ALIGN_RIGHT     : 'right',

/*
 * Queue variable for queuing toast messages
 */
QUEUE           : new Array(),
TIMEOUT         : null,
TIMEOUT_HIDE    : null,

This awesome jQuery plugin is developed by tutcugil. For more Advanced Usages, please check the demo page or visit the official website.