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 plugincss/jquery.toastmessage.css <-- the css fileimages/error.png <-- imageimages/close.gif <-- imageimages/notice.png <-- imageimages/success.png <-- imageimages/warning.png <-- imageMETA-INF/MANIFEST.MF META-INF/LICENSE META-INF/NOTICE
You can also directly grab the files from the latest TAG from github .
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 variablevar 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 milisecondsstayTime: 3000, // time in miliseconds before the item has to disappeartext: '', // content of the itemsticky: false, // should the toast item sticky or not?type: 'notice', // notice, warning, error, successposition: '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 nothingcloseText: '', // text which will be shown as close button, // set to '' when you want to introduce an image via cssclose: 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
Disclaimer
This plugin is based on the jquery-notice () but is enhanced in several ways:
- configurable positioning
- convenience methods for different message types
- callback functionality when closing the toast
- included some nice free icons
License
jquery-toastmessage-plugin is licensed under the Apache License 2.0. The project is founded by