Dynamic Notification Box Plugin For jQuery - MessageNotifyPlugin
File Size: | 7.62 KB |
---|---|
Views Total: | 5175 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.