Toast loader has been introduced in the latest version. Check the demo below to see it in action
$.toast('Here you can put the text of the toast')Loader is enabled by default. In order to disable it or change the color, use the `loader` and `loaderBg` options. Have a look at the demo below
$.toast({
heading: 'Information',
text: 'Loaders are enabled by default. Use `loader`, `loaderBg` to change the default behavior',
icon: 'info',
loader: true, // Change it to false to disable loader
loaderBg: '#9EC600' // To change the background
})To generate a most simple toast, all you have to do is
$.toast('Here you can put the text of the toast')There are different kinds of toast types:
$.toast({
heading: 'Information',
text: 'Now you can add icons to generate different kinds of toasts',
showHideTransition: 'slide',
icon: 'info'
})$.toast({
heading: 'Error',
text: 'Report any <a href="https://github.com/kamranahmedse/jquery-toast-plugin/issues">issues</a>',
showHideTransition: 'fade',
icon: 'error'
})$.toast({
heading: 'Warning',
text: 'It is going to be supper easy for you to use ;)',
showHideTransition: 'plain',
icon: 'warning'
})$.toast({
heading: 'Success',
text: 'And these were just the basic demos! Scroll down to check further details on how to customize the output.',
showHideTransition: 'slide',
icon: 'success'
})Of course that is not all what you can do using this plugin, there are a lot of other options. Let's start explaining each, one by one
You should note that, whenever you are going to use options, you have to pass an options object and specify the text as follows:
$.toast({
text: 'This will become the toast message'
})The text can be an array:
$.toast({
heading: 'How to contribute?!',
text: [
'Fork the repository',
'Improve/extend the functionality',
'Create a pull request'
],
icon: 'info'
})Or put some HTML in the text
$.toast({
heading: 'Can I add <em>icons</em>?',
text: 'Yes! check this <a href="https://github.com/kamranahmedse/jquery-toast-plugin/commits/master">update</a>.',
hideAfter: false,
icon: 'success'
})You can use the heading to set the heading property to set the heading of the toast message
$.toast({
heading: 'Headings',
text: 'You can use the `heading` property to specify the heading of the toast message.',
})There will be times, when you will want to have sticky toasts. To make them sticky, all you have to do is set the hideAfter to false. Here is a sticky toast
$.toast({
text: 'Set the `hideAfter` property to false and the toast will become sticky.',
hideAfter: false
})* hideAfter property is basically used to set the timer after which the toast will get hidden. But you can set it to false in order to achieve the sticky toasts.
You can use the property from the above option i.e. hideAfter to change the timer after which toast gets hidden. You have to specify the timer in milliseconds
$.toast({
text: 'Set the `hideAfter` property to milliseconds and the toast will hide after the specified milli seconds.',
hideAfter: 5000 // in milli seconds
})You can use showHideTransition property to set the animation. Following are the available options:
$.toast({
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
heading: 'Slide transition',
showHideTransition: 'slide'
})$.toast({
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
heading: 'Fade transition',
showHideTransition: 'fade'
})$.toast({
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
heading: 'Plain transition',
showHideTransition: 'plain'
})You can use allowToastClose to allow the user to close the toast or not. The only thing that this option does is make that little cross button show or hide itself
$.toast({
heading: 'Closeable Toast',
text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
allowToastClose: true
})$.toast({
heading: 'Non closeable Toast',
text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
allowToastClose: false
})stack property can be used to specify how many maximum toasts you want to show at any point of time. By default this property is set to 5
$.toast({
heading: 'Stack',
text: 'If set to a number, it will show that number of toasts at max at a time',
stack: 4
})$.toast({
heading: 'No stacking',
text: 'If set to false, there will be only one toast at once.',
stack: false
})Note Hit the run button multiple times to test these demos.
position property can be used to specify the position. There are following predefined positions which you can use:
$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Specify the custom position object or use one of the predefined ones',
position: 'bottom-left',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Specify the custom position object or use one of the predefined ones',
position: 'bottom-right',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom object',
position: 'bottom-center',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom object',
position: 'top-left',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-right',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-center',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'mid-center',
stack: false
})$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: {
left: 120,
top: 120
},
stack: false
})Note It should be noted that, once you change the position of toast by using the `position` property, you'll have to reset the position for the next toasts, if you want them to appear at their default position i.e. the bottom left corner. Or else, each new toast generated will be appearing at the last position i.e. where you displayed the last positioned toast. You can reset the toast position by.
$.toast().reset('all');icon property can be used to specify the predefined types of toasts. Following are the predefined types:
$.toast({
heading: 'Warning',
text: 'Now you can seemlessly generate warnings using the icon property in the options',
icon: 'warning'
})$.toast({
heading: 'Success',
text: 'Here is some kind of success message with a success icon that you can notice at the left side.',
icon: 'success'
})$.toast({
heading: 'Error',
text: 'An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you.',
icon: 'error'
})$.toast({
heading: 'Information',
text: 'Now you can add icons to the toasts as well.',
icon: 'info'
})bgColor property is used to specify the background color of the toast message. Default is '#444'
textColor property is used to specify the text color of the toast message. Default is '#eee'
$.toast({
heading: 'Colors',
text: 'Colors are specified using `bgColor` and `textColor` properties.',
bgColor: '#FF1356',
textColor: 'white'
})textAlign property is used to set the alignment of text inside the toast. Permitted values are:
$.toast({
text: 'Processing! Please wait..',
textAlign: 'center'
})Toast exposes the following events for you to bind to whatever you want
$.toast({
text: 'Triggers the events',
beforeShow: function () {
alert('The toast is about to appear');
},
afterShown: function () {
alert('Toast has appeared.');
},
beforeHide: function () {
alert('Toast is about to hide.');
},
afterHidden: function () {
alert('Toast has been hidden.');
}
})If you have a reference to a toast and want to update that, you can do so by calling the update method on the instance.
var myToast = $.toast({
heading: 'Information',
text: 'Here is some information that will be later on turned to an error',
icon: 'info',
hideAfter: false
});
// Update the toast after three seconds.
window.setTimeout(function(){
myToast.update({
heading: 'Error',
text: 'Here is an information that changed to error',
icon: 'error',
hideAfter: false
});
}, 3000)
If you have the reference to a specific toast, you can reset that by doing the following
var myToast = $.toast('Some toast that needs to be removed.');
myToast.reset(); // remove the toast "Some toast that needs to be removed"
If you do not have the reference to a specific toast and want to reset every toast, do the following:
$.toast().reset('all');