advanced toasts - Free Download Advanced Toast Notification Plugin - jQuery Toasts.js

Free Download Advanced Toast Notification Plugin – jQuery Toasts.js

Posted on

This time I will share jQuery Plugin and tutorial about Advanced Toast Notification Plugin – jQuery Toasts.js, hope it will help you in programming stack.

advanced toasts - Free Download Advanced Toast Notification Plugin - jQuery Toasts.js
File Size: 34.3 KB
Views Total: 1000
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A tiny, easy yet customizable jQuery Toast notification plugin to display sliding, stacked, non-blocking notification popups inspired by Android Toast.

How to use it:

1. Insert the stylesheet jquery.toasts.css and JavaScript jquery.toasts.js into the document.

1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <link rel="stylesheet" href="/path/to/jquery.toasts.css" />
3 <script src="/path/to/jquery.toasts.js"></script>

2. To display a toast, just define the toast message in the toast attribute of a trigger element and the plugin will do the rest.

1 <button toast="This is a basic toast">Simple Toast</button>

3. Determine the time to wait before auto dismissing the toast message. Default: 5000ms.

1 <button toast="This is a basic toast" toast-timeout="1000">Simple Toast</button>

4. Display a close button inside the toast message.

1 <button toast="This is a basic toast<a class='close'>&times;</a>">Simple Toast</button>

5. You are also allowed to create toast messages programmatically:

1 $.toast('Example Toast!');
2 $.toast('Example Toast!', 1000);
3 $.toast('Example Toast! <a class="close">&times;</a>');

6. Execute a function when the user clicks on the toast message.

1 $.toast(
2   'Click me!', // content
3   5000, // timeout
4   function () {
5     alert('Hello world!');
6   } // click event
7 );

7. Execute a function when the user clicks on the toast message.

1 $.toast(
2   'Wait for me!', // content
3   5000, // timeout
4   function () { }, // click event
5   function () {
6     alert('I am closed!');
7   } // closed event
8 );

8. Execute a function when the user hovers over the toast message.

1 $.toast(
2   'Hover me!', // content
3   5000, // timeout
4   function () { }, // click event
5   function () { }, // closed event
6   function () {
7     alert('Hi :)');
8   } // mouse enter event
9 );

9. Execute a function when the cursor is moved out of the toast message.

01 $.toast(
02   'Hover me!', // content
03   5000, // timeout
04   function () { }, // click event
05   function () { }, // closed event
06   function () { }, // mouse enter event
07   function () {
08     alert('Bye');
09   } // mouse leave event
10 );

Changelog:

2020-11-23

  • big update for jquery-toasts.js

2020-11-21

  • Code refactor