jQuery Mobile Android-like Toast Message Plugin - Mobile Toast

Yet another toast plugin for jQuery and jQuery Mobile for broadcasting important notifications on the screen, as seen on the Android devices.

See also:

• Android Style jQuery Toaster Messages Plugin - cftoaster

How to use it:

1. Include jQuery library and jQuery Mobile's javascript and CSS in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

2. Include jQuery Mobile Toast plugin after jQuery library.

<script src="dist/jquery.mobile.toast.min.js"></script> 

3. Include the optional animate.css for extra CSS animations.

<link rel="stylesheet" href="animate.min.css">

4. Create a link to toggle a toast message with a custom CSS3 animation.

<a id="animate-css" href="#" data-role="button">Click me</a>

5. Initialize the plugin and custom the toast message.

$( document ).on( "pageinit", "body", function( event ) {
$('#animate-css').on('tap', function(){
$.mobile.toast({
message: 'Toast Message!', // Your messages
classOnOpen: 'animated bounceInUp' // Animate.css animations
});
});
});
</script>

6. Settings and defaults.

<script>
$( document ).on( "pageinit", "body", function( event ) {
$('#animate-css').on('tap', function(){
$.mobile.toast({
 /**
* The message of the toast.
* 
* @attribute {String} message
* @default ""
* @example
*     $.mobile.toast({ message: 'Live long and prosper' });
* @example
*     // Change default value
*     $.mobile.toast.prototype.options.message = 'Live long and prosper';
*/
message: "",

/**
* Duration of message show to the user.
* 
* @attribute {Number} duration
* @default 1500
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper',
*         duration: 2000
*     });
* @example
*     // Change default value
*     $.mobile.toast.prototype.options.duration = 2000;
*/
duration: 1500,

/**
* Position of message. Possible values: "top", "center", "bottom"
* or number in percent.
*
* @attribute {Number or String} position
* @default 80
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper',
*         position: 'top'
*     });
* @example
*     // Change default value
*     $.mobile.toast.prototype.options.postion = 'top';
*/
position: 80,

/**
* Optional class to overwrite styling of toast on open.
* 
* @attribute {String} classOnOpen
* @default ""
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper',
*         classOnOpen: 'pomegranate'
*     });
* @example
*     // Change default value
*     $.mobile.toast.prototype.options.classOnOpen = 'pomegranate';
*/
classOnOpen: "",

/**
* Optional class to overwrite styling of toast on close.
* 
* @attribute {String} classOnClose
* @default ""
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper',
*         classOnClose: 'pomegranate'
*     });
* @example
*     // Change default value
*     $.mobile.toast.prototype.options.classOnClose = 'pomegranate';
*/
classOnClose: "",

/**
* Before position callback
* 
* @attribute {function} beforeposition
* @event beforeposition
* @default null
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper!',
*         beforeposition: function( event, ui ){
*console.log('beforeposition');
*         }
*     });
* @example
*     $.mobile.toast.on('toastbeforeposition', function( event, ui ){});
*/
beforeposition: null,

/**
* After close callback
* 
* @attribute {function} afterclose
* @event afterclose
* @default null
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper!',
*         afterclose: function( event, ui ){
*console.log('afterclose');
*         }
*     });
* @example
*     $.mobile.toast.on('toastafterclose', function( event, ui ){});
*/
afterclose: null,

/**
* After open callback
* 
* @attribute {function} afteropen
* @event afteropen
* @default null
* @example
*     $.mobile.toast({
*         message: 'Live long and prosper!',
*         afteropen: function( event, ui ){
*console.log('afteropen');
*         }
*     });
* @example
*     $.mobile.toast.on('toastafteropen', function( event, ui ){});
*/
afteropen: null
});
});
});

Change log:

2014-10-16

• Bug fixed.

2014-10-08

• Added position option.

2014-09-17

• Fixed: Code break, if `data-role="content"` is missing.
• Fixed: Update version in package.json.

2014-08-30

• Fixed: Duration as text version

2014-08-29

• Code style checker files added, restyled source file, jscs task added to Grunt

---

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