jquery.mobile.toast

A jQuery Mobile Android-like Toast Plugin.

Getting started

Download the production version or the development version.

Usage

In your web page:

<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>
<script src="jquery.mobile.toast.js"></script>
<script>
$.mobile.toast({
    message: 'Live long and prosper!'
});
</script>

What is a toast?

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. - Android Developer

Requirements

• jQuery
• jQuery Mobile

Optional requirements

• Animate.cc

Development

Run npm install to install dependencies. Run grunt to minify, test and generate documentation.

Options

message

Type: String
Default: ``

The message of the toast.

Example:

$.mobile.toast({ message: 'Live long and prosper' });

// Change default value
$.mobile.toast.prototype.options.message = 'Live long and prosper';

duration

Type: Number or String
Default: 2000

Duration of message show to the user. Possible values: "short", "long" number in milliseconds.

Example:

$.mobile.toast({
    message: 'Live long and prosper',
    duration: 2000
});

// Change default value
$.mobile.toast.prototype.options.duration = 2000;

position

Type: Number or String
Default: 80

Position of message. Possible values: "top", "center", "bottom" or number in percent.

Example:

$.mobile.toast({
    message: 'Live long and prosper',
    position: 80
});

// Change default value
$.mobile.toast.prototype.options.position = 80;

classOnOpen

Type: String
Default: ""

Optional class to overwrite styling of toast on open.

Example:

$.mobile.toast({
    message: 'Live long and prosper',
    classOnOpen: 'pomegranate'
});

// Change default value
$.mobile.toast.prototype.options.classOnOpen = 'pomegranate';

classOnClose

Type: String
Default: ""

Optional class to overwrite styling of toast on close.

Example:

$.mobile.toast({
    message: 'Live long and prosper',
    classOnClose: 'pomegranate'
});

// Change default value
$.mobile.toast.prototype.options.classOnClose = 'pomegranate';

Examples

Example 1: Default

Default toast.

Javascript:

$.mobile.toast({
    message: 'Live long and prosper!'
});

Example 2: Looong toast

Toast with a 3000ms duration, default is 2000ms.

Javascript:

$.mobile.toast({
    message: 'Live long and prosper!',
    duration: 'long'
});

Example 3: Custom toast

Toast with additional class to customize.

CSS:

.pomegranate {
    /* OVERWRITES */
    background-color:      #E74C3C !important;
    -webkit-border-radius: 2px !important;
            border-radius: 2px !important;

    /* CUSTOM */
    box-shadow: 0 2px #C0392B;
}
.pomegranate p {
    /* OVERWRITES */
    /*max-width:  160px    !important;*/
    /*margin:     0        !important;*/
    /*padding:    6px 12px !important;*/
    padding-left: 28px     !important;

    /*font-size:  14px     !important;*/
    /*color:      #FFFFFF  !important;*/
    /*text-shadow:none     !important;*/

    /*border:     none     !important;*/

    /* CUSTOM */
    background-image: url('heart.png');
    background-repeat: no-repeat;
    background-position: 6px 8px;
    background-size: 16px;
}

Javascript:

$.mobile.toast({
    message: 'Live long and prosper!',
    classOnOpen: 'pomegranate'
});

Example 4: Events

Javascript:

$.mobile.toast({
    message: 'Live long and prosper!',
    afterclose: function( event, ui ){
        alert('Toast after closed!');
    },
    afteropen: function( event, ui ){
        alert('Toast after opened!');
    },
    beforeclose: function( event, ui ){
        alert('Toast before closed!');
    },
    beforeposition: function( event, ui ){
        alert('Toast before positioned!');
    },
    create: function( event, ui ){
        alert('Toast created!');
    }
});

Example 5: Custom start animation

Javascript:

$.mobile.toast({
    message: 'Live long and prosper!',
    classOnOpen: 'animated bounceInUp'
});

Example 6: Custom start/end animation

Javascript:

$.mobile.toast({
    message: 'Live long and prosper!',
    classOnOpen: 'animated slideInLeft',
    classOnClose: 'slideOutRight'
});

Release History

0.0.7 (2014-09-16)

• Fixes #6

0.0.6 (2014-08-30)

• option duration with text version "short" (2000 ms) or "long" (3500ms)

0.0.5 (2014-03-17)

• base widget ($.mobile.widget) removed, deprecated as of jQuery Mobile 1.4 and will be removed in 1.5
• update demo to jQuery Mobile 1.4
• add new custom theme "KitKat"

0.0.4 (2013-10-02)

• increase font size
• update demo to jQuery Mobile 1.4.0 beta.1
• Tests added

0.0.3