Dynamic Notification Box Plugin For jQuery - MessageNotifyPlugin

MessageNotifyPlugin is a notification box plugin for jQuery that displays read and unread messages in a notification popup with message count support.

How to use it:

1. Load the necessary jQuery library and Font Awesome iconic font in the document.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>

2. Load the jQuery MessageNotifyPlugin's JavaScript and CSS files in the document.

<link rel="stylesheet" href="css/message.css">
<script src="js/message.js"></script>

3. Create a placeholder element for the notification box.

<div id="message"></div>

4. Initialize the plugin and add your own messages (with read status) to the notification box.

MessagePlugin.init({
  elem: "#message",
  msgData: [
    {text: "message 1", id: 1, readStatus: 1},
    {text: "message 2", id: 2, readStatus: 0},
    {text: "message 3", id: 3, readStatus: 0},
    {text: "message 4", id: 4, readStatus: 0},
    {text: "message 5", id: 5, readStatus: 0},
    {text: "message 6", id: 6, readStatus: 0}],
    getNodeHtml: function(obj, node) { // custom html
      if (obj.readStatus == 1) {
          node.isRead = true;
      } else {
          node.isRead = false;
      }
      var html = "<p>"+ obj.text +"</p>";

      node.html = html;

      return node;
    }
});

5. More configuration options.

MessagePlugin.init({

  // title
  title: "Notification Box", 

  // width/height
  width: 250,
  height: 350,

  // message data
  msgData: [],

  // notice data
  noticeData: [],

  // the amount of unread messages
  msgUnReadData: 0,

  // the amount of unread notifications
  noticeUnReadData: 0, 
  
  // the amount of messages to display
  msgShow: 5, 

  // the amount of notifications to display
  noticeShow: 5
  
});

6. Execute a function when you click on the 'Mark As Read' button.

MessagePlugin.init({

  allRead: null
  
});

7. Execute functions when you click on the messages and notifications.

MessagePlugin.init({

  msgClick: null, 
  noticeClick: null
  
});

---

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