isaeken/jquery-toasts
A simple & lightweight toast messages library
Installation
You can install jquery-toasts plugin using npm or include directly files
Install with using npm
npm install jquery-toasts
or include files
<link rel="stylesheet" href="/your/servers/assets/path/css/jquery-toasts.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="/your/servers/assets/path/js/jquery-toasts.min.js"></script>
Documentation
Create toasts using attributes
You can create toasts using attributes for example:
<button data-toast="Your toast message">Create toast using attribute</button>
and you can create toast with custom timeout
<button data-toast="Your toast message" data-timeout="1000">Create toast using attribute with timeout</button>
Try it
Create toasts using jQuery
You can create toasts using jQuery functions, for example:
<button onclick="$.toast('Your toast message');">Create toast using jQuery</button>
Try it
Create advanced toasts using jQuery
You can create advanced toasts using jQuery function.
Creating toast with timeout
<button onclick="$.toast('Your toast message', 1000);">Create toast using jQuery</button>
Creating toast with action
<button onclick="$.toast('Your toast message <a class=\'toast-action close\'>×</a>');">Create toast with close button</button>
Events
Click
$.toast('Your toast message', 3000, function () { alert('You are clicked!'); });
Close
$.toast('Your toast message', 3000, function () { }, function () { alert('Closed!'); });
Mouse Enter
$.toast('Your toast message', 3000, function () { }, function () { }, function () { alert('Mouse Enter'); });
Mouse Leave
$.toast('Your toast message', 3000, function () { }, function () { }, function () { }, function () { alert('Mouse Leave'); });