jQuery Plugin For Animated & Stackable Toasts - Toast

jQuery Plugin For Animated & Stackable Toasts - Toast
File Size: 29 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Toast is a jQuery notification plugin used to display animated, highly customizable & styleable, stackable visual feedback messages on your web page.

Features:

  • Lightweight and simple-to-use.
  • Auto disappear after a timeout.
  • Corner close icon to close a toast message manually.
  • 3 transition effects: slide, fade or plain.
  • Custom stack length.
  • Can be placed anywhere on the web page.
  • Fully styleable via CSS.
  • Callback events supported.

Basic Usage:

1. Load the jQuery Toast plugin's stylesheet in your document's head section.

<link href="jquery.toast.min.css" rel="stylesheet" type="text/css">

2. Load the jQuery JavaScript library and the jQuery Toast plugin's script at the end of the document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.toast.js"></script>

3. Optionally, you can create an element to toggle a toast message.

<a class="basic-demo">Basic Demo</a>

4. Bind the click function on the A tag and toggle a toast message with custom text.

$('.basic-demo').on('click', function ( e ) {
e.preventDefault();
$.toast({
  text : "Your toast message goes here"
})
});

5. Available options & callbacks to customize your toast messages.

// custom message text
text: '',

// custom toast title
heading: '',

// show/hide transition effects.
// fade, slide or plain.
showHideTransition: 'fade',

// show a close icon
allowToastClose: true,

// auto hide after a timeout
hideAfter: 5000,

// loader
loader: true,
loaderBg: '#9EC600',

// stack length
stack: 5,

// bottom-left, bottom-right, bottom-center, 
// top-left,top-right
// top-center, mid-center
// or an object representing the left, right, top, bottom values
position: 'bottom-left',

// background color
bgColor: '#444',

// custom text color
textColor: '#eee',

// custom text align
textAlign: 'left',

// custom icon
icon: false,

// callback functions.
beforeShow: function () {},
afterShown: function () {},
beforeHide: function () {},
afterHidden: function () {},
onClick: function () {}

Change logs:

2017-11-20

  • Add attributes to expose notifications to screenreader users.

2017-10-04

  • Add class option to specify custom classes

2016-05-05

2016-03-06

  • Updated the js and css for the dist as per the newer functionality

2015-03-23

  • Updated the js and css for the dist as per the newer functionality

2014-11-21

  • added the ability to update the toast $.toast().update();.

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