Android Style jQuery Toaster Messages Plugin - cftoaster
File Size: | 4.25 KB |
---|---|
Views Total: | 1163 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

cftoaster is a simple jQuery plugin for creating Android-style toaster messages centered in the page to display the important notifications to your users.
How to use it:
1. Include the latest version of jQuery javascript library in the page.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Include the jQuery cftoaster plugin's javascript and CSS files in the page.
<link rel="stylesheet" title="default" type="text/css" href="jquery.cftoaster.1.0.1.css"/> <script type="text/javascript" src="jquery.cftoaster.1.0.1.min.js"></script>
3. Call the plugin on the DOM element where the toaster message will appear.
$("#element").cftoaster({ content: "Your messages" });
4. Available options.
$("#element").cftoaster({ content: "Your messages", // string, can be html element: "body", // DOM element to insert the message animationTime: 150, // time in ms for the animation, -1 to show no animation showTime: 3000, // time in ms for the toast message to stay visible maxWidth: 250, // maximum width of the message container in px backgroundColor: "#1a1a1a", // hexadecimal value of the colour, requires "#" prefix fontColor: "#eaeaea", // hexadecimal value of the colour, requires "#" prefix bottomMargin: 75 // space to leave between the bottom of the toast message and the bottom of the browser window in px });
This awesome jQuery plugin is developed by pyuan. For more Advanced Usages, please check the demo page or visit the official website.