jQuery消息通知显示插件MessageNotifyPlugin

所属分类:UI-工具提示

 3634  24  查看评论 (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;
    }
});
相关插件-工具提示

jquery 工具提示插件awTooltip

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

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

一款腾讯UED设计的提示插件
  工具提示
 17417  130

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 10032  51

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 18296  98

讨论这个项目(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
    还可以,就是手机端不好用呀。 回复
取消回复
  短信接口