MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等。
使用方法
在页面中引入jquery、message.js和message.css样式文件，以及font-awsome字体图标文件。
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/message.css">
<script src="js/jquery.min.js"></script>
<script src="js/message.js"></script>
AI 代码解读
HTML结构
使用一个
来作为该消息通知显示框的容器。
<div id="message"></div>
AI 代码解读
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该消息通知显示插件。
MessagePlugin.init({
elem: "#message",
msgData: [{
text: "message1", id: 1, readStatus: 1},
{
text: "message2", id: 2, readStatus: 0},
{
text: "message3", id: 3, readStatus: 0},
{
text: "message4", id: 4, readStatus: 0},
{
text: "message5", id: 5, readStatus: 0},
{
text: "message6", id: 6, readStatus: 0}],
msgUnReadData: 99,
noticeUnReadData: 99,
msgClick: function(obj) {
alert("消息点击事件");
},
noticeClick: function(obj) {
alert("提醒点击事件");
},
allRead: function(obj) {
alert("全部已读");
},
getNodeHtml: function(obj, node) {
if (obj.readStatus == 1) {
node.isRead = true;
} else {
node.isRead = false;
}
var html = "<p>"+ obj.text +"</p>";
node.html = html;
return node;
}
});
AI 代码解读
