Easy Customizable Message Toaster For jQuery - Toast.js

Easy Customizable Message Toaster For jQuery - Toast.js

Toast.js is a lightweight yet customizable jQuery notification plugin which helps you create and display temporary or sticky toast messages like Android.

1. Load jQuery library and the jQuery toast.js plugin's files in the document. It is recommended to load the JavaScript files at the bottom just before the closing </body> tag.

<link rel="stylesheet" href="jquery-toast.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery-toast.js"></script>

2. Create a default toast message that always stays at the bottom-right of the screen.

$.fn.toast({ 
  content: "Hi, I'm a toast!",
  delay: 0 
});

3. Create a 'Notify' toast message that auto dismisses after 5 seconds.

$.fn.toast({ 
  id: 'notify', 
  content: "Hi, I'm a toast!", 
  type: 'notify',
  delay: 5000 
});

4. Create a 'Warning' toast message that auto dismisses after 10 seconds.

$.fn.toast({ 
  id: 'warn', 
  content: "Hi, I'm a toast!", 
  type: 'warn',
  delay: 10000 
});

5. Create an 'error' toast message that shows at the bottom-left of the screen and auto dismisses after 5 seconds.

$.fn.toast({ 
  id: 'error', 
  content: "Hi, I'm a toast!", 
  type: 'error',
  delay: 5000,
  position: "bottom-left",
});

6. Create a 'success' toast message that always stays at the bottom-left of the screen.

$.fn.toast({ 
  id: 'success', 
  content: "Hi, I'm a toast!", 
  type: 'success',
  delay: 0,
  position: "bottom-left",
});

7. Set the action of the toast message.

$.fn.toast({ 
  action: 'show', // or record, remove
});

This awesome jQuery plugin is developed by doublesidedstickytap. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.11.2017
  • Source