Versatile Dynamic jQuery Notification Box Plugin - notice.js

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.