jQuery Mobile Android-like Toast Message Plugin - Mobile Toast

jQuery Mobile Android-like Toast Message Plugin - Mobile Toast
File Size: 163 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

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.