Minimal Customizable Toast Notification In jQuery - td-message

Minimal Customizable Toast Notification In jQuery - td-message
File Size: 9.38 KB
Views Total: 587
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

td-message is a tiny, Android-inspired notification plugin to create toast-like notice/alert/announcement popups with custom icons, positions, durations, and styles.

More Features:

  • 4 notification types: info, success, error, and warning.
  • Shows close button or not.
  • Can be placed anywhere on the web page.

How to use it:

1. Insert the following JavaScript and CSS files in the HTML page.

<link rel="stylesheet" href="/path/to/td-msessage.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/td-message.js"></script>

2. Show a default (info) toast message on the page.

$.message({
  text: "Info Message"
});

3. Create a 'success' toast message that automatically dismiess after 5 seconds (Default: 2 seconds).

$.message({
  type: "success",
  text: "Success Message",
  duration: 5000
});

4. Create an 'error' toast message that is placed at the bottom-right of the webpage. All possible position parameters:

  • top-left
  • top-center (default)
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right
$.message({
  type: "error",
  text: "Error Message",
  positon: "bottom-right"
});

5. Create a 'warning' toast message with no close button.

$.message({
  type: "warning",
  text: "Warning Message",
  showClose: false
});

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