Fully Configurable Toaster Plugin For jQuery - xl-toast

File Size: 7.34 KB
Views Total: 1483
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fully Configurable Toaster Plugin For jQuery - xl-toast

xl-toast is a super light (2kb unminified) jQuery plugin that helps you create highly customizable, Android style toast notifications using jQuery .extend() method.

How to use it:

1. Include the JavaScript file xl-toast.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/xl-toast.js"></script>

2. The JavaScript to show a default toast message on the screen.

$.toast({
  title: 'This is a toast message.'
});

3. Set the position of your toast message.

$.toast({
  title: 'This is a toast message.',
  position: 'top' // e.g. top, bottom, middle
});

4. Override the default the timeout.

$.toast({
  title: 'This is a toast message.',
  duration: 5000
});

5. Set the size (width/height) of the toast message.

$.toast({
  title: 'This is a toast message.',
  width: 'auto',
  height: '20px',
  lineheight: 20px
});

6. Set the text and background colors.

$.toast({
  title: 'This is a toast message.',
  backgroundColor: 'rgba(0, 0, 0, .7)',
  textColor: '#fff'
});

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