Versatile Dynamic jQuery Notification Box Plugin - notice.js
File Size: | 56.4 KB |
---|---|
Views Total: | 840 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The jQuery notice.js plugin makes it easier to create dynamic notification boxes sliding from the 'Bottom Right' of the webpage when triggered.
Features:
- Supports JSON data.
- Custom notification icons.
- Supports multiple messages on one notification box.
- Allows to add messages dynamically.
- 5 built-in notification types: default, info, success, warning, error.
How to use it:
1. Include the iconfont.css
and notice.css
in the head
section of the webpage.
<link rel="stylesheet" href="iconfont.css"> <link rel="stylesheet" href="notice.css">
2. Include the notice.js
after jQuery library and we're ready to go.
<script src="/path/to/jquery.js"></script> <script src="js/notice.js"></script>
3. The JavaScript to create a single notification message.
// data: JSON or JSON array // callback: callback functions $.notice(data,callback)
var noticeData = { title: 'Title', desc: 'Notification Message Here' } var cbSingle = { // callbacks read: function(data) { alert(data.title) $.notice.close() }, later: function(data) { alert(data.title) $.notice.close() } readAll: function(data) { alert(data.title) $.notice.close() } } // shows the notification messages $.notice(noticeData, cbSingle)
4. The JavaScript to show multiple messages in a navigatable notification box.
var noticeList = [{ title: 'Title 1', desc: 'Message 1' }, { title: 'Title 2', desc: 'Message 2' }, { title: 'Title 3', desc: 'Message 3' }] var cbMultiple = { read: function(data, dataList, index) { alert(data.title) noticeList.splice(index, 1) $.notice.refresh(noticeList) }, later: function(data, dataList, index) { alert(data.title) }, readAll: function(data, dataList, index) { alert(dataList.length) $.notice.close() } } $.notice(noticeList, cbMultiple)
5. Add a new message to the notification box.
var newNotice = { title: 'Title 4', desc: 'New Message' } $.notice.add(newNotice)
6. The plugin comes with 4 themes to fit your extra needs.
$.notice.info(noticeList, cbMultiple) $.notice.success(noticeList, cbMultiple) $.notice.warning(noticeList, cbMultiple) $.notice.error(noticeList, cbMultiple)
This awesome jQuery plugin is developed by areyouse7en. For more Advanced Usages, please check the demo page or visit the official website.