jQuery消息通知显示插件MessageNotifyPlugin

所属分类:UI-工具提示

 2411  21  查看评论 (3)
jQuery消息通知显示插件MessageNotifyPlugin ie兼容9

A jQuery message notify plugin 基于jQuery的一个消息通知显示插件

使用方法:

1.设置容器元素,引入js, css

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/message.js"></script>
<link rel="stylesheet" href="css/message.css">
<body>
    <div id="message"></div>
</body>

2.初始化

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;
    }
});
相关插件-工具提示

一款腾讯UED设计的提示插件

一款腾讯UED设计的提示插件
  工具提示
 16222  121

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 15932  120

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 9289  107

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 11482  40

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    he 0
    2018/4/26 20:24:42
    建议增加缓存查看是否已查看提醒来更新提醒数 回复
    he 0
    2018/4/26 17:49:04
    phoenixgem 0
    2018/4/18 12:35:23
    还可以,就是手机端不好用呀。 回复
取消回复