isaeken/jquery-toasts

A simple & lightweight toast messages library


isaeken/jquery-toasts

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\'>&times;</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'); });