jquery toastmessage （Jquery类似安卓消息提示框）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Do you wanna have some toasts ?

jquery-toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. They may or may not disrupt the user and they are still informative. It's a quite nice way to report info or error to the user.

The plugin is entirely customizable. So you can change the positioning, the required user action, the style and so on.

Getting the plugin

The plugin is packaged inside a Jar file (Java Archive). So just download the jar file and unzip it:

jquery.toastmessage.js <-- the plugin css/jquery.toastmessage.css <-- the css file images/error.png <-- image images/close.gif <-- image images/notice.png <-- image images/success.png <-- image images/warning.png <-- image META-INF/MANIFEST.MF META-INF/LICENSE META-INF/NOTICE

You can also directly grab the files from the latest TAG from github https://github.com/akquinet/jquery-toastmessage-plugin/tree/jquery-toastmessage-plugin-0.2.0.

To get the plugin to work, you need the plugin javascript file, the css file and a couple of images.

Types of toast messages

You have 4 different toast types you can use. Each type comes with its own icon and colored border. The types are:

notice
success
warning
error

The following methods will display a toast message:

$().toastmessage('showNoticeToast', 'some message here'); $().toastmessage('showSuccessToast', "some message here"); $().toastmessage('showWarningToast', "some message here"); $().toastmessage('showErrorToast', "some message here");

These toast messages are shown on the upper right side of your browser and will stay for some time before they will fade out automatically.

To remove a special toast you can do that with

$().toastmessage('removeToast', toastObject);

Example:

// reconfiguring the toasts as sticky $().toastmessage({sticky : true});// saving the newly created toast into a variable var myToast = $().toastmessage('showNoticeToast', 'some message here');// removing the toast $().toastmessage('removeToast', myToast);

Configuration of your toasts

Sometime the predefined settings are not the good ones. You can alter the configuration to your special use case.

// user configuration of all toastmessages to come: $().toastmessage('showToast', { text : 'Hello World', sticky : true, position : 'top-right', type : 'success', close : function () {console.log("toast is closed ...");} });

These are the provided configuration properties with its default values:

inEffectDuration: 600, // in effect duration in miliseconds stayTime: 3000, // time in miliseconds before the item has to disappear text: '', // content of the item sticky: false, // should the toast item sticky or not? type: 'notice', // notice, warning, error, success position: 'top-right', // top-left, top-center, top-right, middle-left, middle-center, middle-right // Position of the toast container holding different toast. // Position can be set only once at the very first call, // changing the position after the first call does nothing closeText: '', // text which will be shown as close button, // set to '' when you want to introduce an image via css close: null // callback function when the toastmessage is closed

Besides global configuration for all of your toasts. There is also a more general toast method provided where you can modify the special toast on your hand.

$().toastmessage('showToast', { text : 'Some information for you ...', sticky : true, type : 'notice' });

This will show a toastmessage of type 'success' which is sticky and will not fade away by itself. All other already showed

To see some more examples please have a look into the Tests in src/test/javascript/ToastmessageTest.js

For further style configuration please see corresponding css file: src/main/resources/css/jquery-toastmessage.css