对话框/Tips

jQuery消息通知显示插件

PetitQPetitQ 对话框/Tips 2018-10-26 1.83K 0
收藏
阿里云

MessageNotifyPlugin 是一款简单的 jQuery 消息通知显示插件。该 jQuery 消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等。

使用方法：

在页面中引入 jquery、message.js 和 message.css 样式文件，以及 font-awsome 字体图标文件。

也想出现在这里？联系我们吧
创客主机
  1. <link rel="stylesheet" href="css/font-awesome.min.css">
  2. <link rel="stylesheet" href="css/message.css">
  3. <script src="js/jquery.min.js"></script>
  4. <script src="js/message.js"></script>

HTML 结构：

使用一个

来作为该消息通知显示框的容器。

  1. <div id="message"></div>

初始化插件：

在页面 DOM 元素加载完毕之后，通过下面的方法来初始化该消息通知显示插件。

  1. MessagePlugin.init({
  2.     elem: "#message",
  3.     msgData: [{text: "message1", id: 1, readStatus: 1},
  4.         {text: "message2", id: 2, readStatus: 0},
  5.         {text: "message3", id: 3, readStatus: 0},
  6.         {text: "message4", id: 4, readStatus: 0},
  7.         {text: "message5", id: 5, readStatus: 0},
  8.         {text: "message6", id: 6, readStatus: 0}],
  9.         msgUnReadData: 99,
  10.         noticeUnReadData: 99,
  11.         msgClick: function(obj) {
  12.             alert("消息点击事件");
  13.         },
  14.         noticeClick: function(obj) {
  15.             alert("提醒点击事件");
  16.         },
  17.         allRead: function(obj) {
  18.             alert("全部已读");
  19.         },
  20.         getNodeHtml: function(obj, node) {
  21.             if (obj.readStatus == 1) {
  22.                 node.isRead = true;
  23.             } else {
  24.                 node.isRead = false;
  25.             }
  26.             var html = "<p>"+ obj.text +"</p>";
  27.  
  28.             node.html = html;
  29.  
  30.             return node;
  31.         }
  32. });

MessageNotifyPlugin jQuery 消息通知显示插件的 github 地址为：https://github.com/Inaho-yzb/MessageNotifyPlugin

jQuery 消息通知显示插件

已有 456 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录