Easy Non-blocking Notification Plugin With jQuery - KanNotify.js
File Size: | 11.7 KB |
---|---|
Views Total: | 987 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
KanNotify.js is a lightweight and easy-to-use jQuery plugin that presents your notification messages of various types with custom positions and icons.
Features:
- Can be positioned anywhere on the webpage via CSS.
- 5 notificaiton types: success, error, info, warning and default.
- Supports any iconic font. E.g. Font Awesome.
- Allows to auto dismiss after a specific timeout.
How to use it:
1. To get started, you need to load jQuery and the jQuery KanNotify.js plugin's files in the document as shown below:
<script src="//code.jquery.com/jquery.min.js"></script> <link rel="stylesheet" href="kanNotify.css"> <script src="jquery.kanNotify.js"></script>
2. Load the Font Awesome for the notification icons (OPTIONAL).
<link rel="stylesheet" href="font-awesome.min.css">
3. Create a basic notification with custom message:
$.kanNotify.add('Message Here'); // or $.kanNotify.add({msg:'Message Here'});
4. The JavaScript to close the notifications manually:
// close a notification with a fadeOut effect $.kanNotify.close(itemId,fade); // close all the notifications $.kanNotify.closeAll();
5. More API methods:
$.kanNotify.success('Success Message Here'); $.kanNotify.error('Error Message Here'); $.kanNotify.warning('Warning Message Here'); $.kanNotify.info('Information Message Here');
6. All default options to customize the notification plugin.
$.kanNotify.add({ // custom position position:{"right":5,"bottom":50}, // enable fade effect fade : false, // animation speed fade_out_speed: 300, // timeout auto_dismiss:4000, // is dismissable allow_dismiss : true, // wrapper's width wrapperWidth : "auto", // notification type type:'default', // custom icons iconDefault : {'info':'fa-info-circle','error':'fa-exclamation-circle','success':'fa-check-circle','warning':'fa-warning','default':'fa-chevron-circle-right','debug':'fa-bug'} });
This awesome jQuery plugin is developed by waterbeside. For more Advanced Usages, please check the demo page or visit the official website.