Toasts

Content

Given that toast elements are essentially blank containers that dynamically position themselves on the screen, you have the flexibility to include any content within the element by specifying it in the html parameter. The content can be either plain text or complex html structures.

                    /*----- Plain text content -----*/
$().jtbToast('create', {
    html:'This one contains plain text.'
});

/*----- HTML content -----*/
$().jtbToast('create', {
    html:'<span>This one contains <b>html</b> elements.<span>'
});
                

Closable

To make your toast elements closable ones, you can simply give them .jtbToast-closable class via specifying it in classes parameter.

                    /*----- HTML content -----*/
$().jtbToast('create', {
    html:'This one is closable.',
    classes: 'jtbToast-closable'
});
                

Duration

To specify your toast element's duration in seconds, you can do it via duration parameter of plugin. Keep in mind that the duration needs to be in seconds and also the default value of duration is 4 seconds. So if you do not specify the duration, the toast will stay on the screen for 4 seconds.

                    /*----- Plain text content -----*/
$().jtbToast('create', {
    html:'This one stays 10 seconds.', 
    duration:10
});
                

At this point if you want to make your toast element stay on screen always, you can specify the duration of it as -1 any value that is negative will make the plugin do not create destroy timeout and make the toast element stay on screen always.

                    /*----- Plain text content -----*/
$().jtbToast('create', {
    html:'This will stay on screen until you close it.', 
    duration: -1,
    classes: 'jtbToast-closable'
});
                

Positioning

If you want to create your toast element in a specific part of screen, you can use one of six pre-defined positions of toast elements via adding position attribute to your creation function.

Available options are:

• TL for top-left
• TC for top-center
• TR for top-right (Default)
• BL for bottom-left
• BC for bottom-center
• BR for bottom-right

                    /*----- Example toast (Bottom-right) -----*/
$().jtbToast('create', {
    'html': '...',
    'position': 'BR',
});
                

Stacking

By default the plugin automatically stacks the toast elements in the area. However if the area contains 4 or more toasts at the same time, to make the project space-efficient it collapses the area and hides the elements inside it behind the first toast. So to stack the elements you do not need to do anything, the plugin handles the heavy work in here.

                    /*----- HTML content -----*/
$().jtbToast('create', {
    ...
});
                

Colors

JTB_MD enables you to utilize the predefined colors outlined in the Colors section for your toast elements. To do so, simply apply the desired color class to your toasts:

.jtbToast-[ purple | blue | aqua | green | lime | yellow | orange | volcano | red ]

                                /*----- Example toast (Green) -----*/
$().jtbToast('create', {
    html:'...', 
    classes: 'jtbToast-green'
});
                            

Sizes

In JTB_MD, you can also resize your toast elements. To make your toast larger or smaller than the default, simply apply the relevant size-class to your element.

.jtbToast-[ xs | sm | md | lg | xl ]

                                /*----- Example toast (size = xs) -----*/
$().jtbToast('create', {
    html:'...', 
    classes: 'jtbToast-xs'
});
                            

Removing Borders

To create a borderless toast element, simply apply the .jtbToast-borderless class.

                    /*----- Plain text content -----*/
$().jtbToast('create', {
    html:'This one has no borders.', 
    classes: 'jtbToast-borderless'
});
                

Rectangular

To create a rectangular toast (with no border radius), apply the .jtbToast-rect class to your element.

                    /*----- Plain text content -----*/
$().jtbToast('create', {
    html:'This one has no borders.', 
    classes: 'jtbToast-rect'
});
                

Methods

Besides creation, you can call pre-defined methods of toasts to take an action manually.

                        /*----- Destroying toast -----*/
$('#yourToastID').jtbToast('destroy');
                    

Callbacks

Throughout the process of creating toasts and using methods via the plugin, you can execute additional functions after the operation by providing additional parameter to the jtbToast() function.

The jtbToast plugin offers three ways to specify a callback function. Since one of them is defining the listeners for element as attributes on their html tags such as onDestroy="console.log('destroyed!');" and you've already saw that we do not go over them again. Here are the two additional methods:

• Create a function elsewhere and call it inside jtbToast().

                    /*-----  Create toast and callback -----*/
$().jtbToast("create", {...parameters...}, showProcessDone);

/*------ Define showProcessDone in here -------*/
function showProcessDone(){
	alert('Process done boss.');
}
                

• Define the function itself inside jtbToast().

                    /*-----  Create toast and callback -----*/
$().jtbToast("create", {...parameters...}, function(){
	alert('Process done boss.');
});
                

The closing actions of toasts in JTB_MD triggers jtbToast plugin's destroy method. So if you define onDestroy attribute to your toast element, it automatically calls defined function when a user closes the element.

                    /*----- Create toast with onDestroy attribute -----*/
$().jtbToast("create", {
    ...
    onDestroy: 'showProcessDone();',
    ...
});
                

Custom Close Buttons

If you prefer not to use the default close button in your toast, you can customize them using the jtbToast plugin methods:

Ensure that an toast with a custom close button does not have the .jtbToast-closable class.

                    /*----- Create toast with onDestroy attribute -----*/
$().jtbToast('create', {
    id:'toast-X',
    ...
    html:"...<button class='jtbButton' onclick='$(\"#toast-X\").jtbToast('destroy');'>I understand</button>...",
    ...
});