jQuery消息通知显示插件MessageNotifyPlugin

所属分类:UI-工具提示

 29967  324  查看评论 (4)
分享到微信朋友圈
X
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自动关闭消息通知插件izitoast.js

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

按首字母搜索(仿携程)

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

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

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

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 32596  393

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ranjiaming 0
    2019/4/28 10:49:05
    he 0
    2018/4/26 20:24:42
    建议增加缓存查看是否已查看提醒来更新提醒数 回复
    he 0
    2018/4/26 17:49:04
    phoenixgem 0
    2018/4/18 12:35:23
    还可以,就是手机端不好用呀。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复