jQuery消息通知显示插件MessageNotifyPlugin

所属分类:UI-工具提示

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

按首字母搜索(仿携程)

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

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 11754  79

jquery 工具提示插件awTooltip

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

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 15920  91

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

    phoenixgem 0
    2018/4/18 12:35:23
    还可以,就是手机端不好用呀。 回复
取消回复