layim使用中添加自定义事件与显示样式

layim的文档中有layim.setFriendStatus(11111, ‘online’); 方法用来修改用户上线与离线的状态显示;
不知道是不是没有授权的原因，layim.js中没有找到这个方法;
于是，自己定一个。

在layim.js 中添加方法

行号60-90处

// 离线与上线
LAYIM.prototype.setFriendStatus = function(id,status){return setFriendStatus(id,status), this;};

后面 1070行左右吧，

//离线与上线var setFriendStatus = function(id, status){    var the_one = $("#layim-friend"+id);if(status == "online"){        the_one.removeClass('gray');}else if(status =="offline"){the_one.addClass('gray');}  };

另外面板生成这，也要改一项，用来判断用户是否在线
=={{ "offline"data.status?“class=gray”:""}}

//主模板var listTpl = function(options){var nodata = {friend: "该分组下暂无好友",group: "暂无群组",history: "暂无历史会话"};options = options || {};options.item = options.item || ('d.' + options.type);return ['{{# var length = 0; layui.each('+ options.item +', function(i, data){ length++; }}','<li layim-event="chat" data-type="'+ options.type +'" data-index="{{ '+ (options.index||'i') +' }}" id="layim-'+ options.type +'{{ data.id }}" {{ "offline"==data.status?"class=gray":""}} ><img src="{{ data.avatar }}"><span>{{ data.username||data.groupname||data.name||"佚名" }}</span><p>{{ data.remark||data.sign||"" }}</p></li>','{{# }); if(length === 0){ }}','<li class="layim-null">'+ (nodata[options.type] || "暂无数据") +'</li>','{{# } }}'].join('');};

这里用到一个灰色的css 需要在layim.css中添加

/* 离线好友*/
.gray{ -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}

以上完事后，在页面上socket事件监听中调用方法

//监听收到的消息socket.onmessage = function(res){//console.log(res.data);var data = eval("("+res.data+")");switch(data['message_type']){// 服务端ping客户端case 'ping':socket.send('{"type":"ping"}');break;// 登录 更新用户列表case 'init'://console.log(data['id']+"登录成功");//layim.getMessage(res.data); //res.data即你发送消息传递的数据（阅读：监听发送的消息）break;//添加 用户case 'addUser':           layim.addList(data.data);break;//删除 用户case 'delUser':layim.removeList({type: 'friend',id: data.data.id //好友或者群组ID});break;// 添加 分组信息case 'addGroup':               layim.addList(data.data);break;case 'delGroup':layim.removeList({type: 'group',id: data.data.id //好友或者群组ID});break;// 检测聊天数据case 'chatMessage':             layim.getMessage(data.data);break;// 离线消息推送case 'logMessage':setTimeout(function(){layim.getMessage(data.data)}, 1000);break;// 用户退出 更新用户列表case 'online':            layim.setFriendStatus(data.id, 'online');break;   // 用户退出 更新用户列表case 'logout':layim.setFriendStatus(data.id, 'offline');         break;//聊天好有不在线case 'ctUserOutline':              layer.msg('好友不在线', {'time' : 1000});break;}};

layim使用中添加自定义事件与显示样式相关推荐

Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
android 自定义控件焦点,Android 自定义Button按钮显示样式（正常、按下、获取焦点）...
现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...
Vue-弹层显示样式
弹层显示样式1 1.先将左侧样式写 <template><div class='home-category'><ul class="menu"> ...
python使用matplotlib可视化：设置坐标轴的范围、设置主次坐标轴刻度、坐标轴刻度显示样式、坐标轴刻度数颜色、小数点位数、坐标轴刻度网格线、线条类型、数据点形状标签、文本字体、颜色、大小等
python使用matplotlib可视化:设置坐标轴的范围.设置主次坐标轴刻度.坐标轴刻度显示样式.坐标轴刻度数颜色.小数点位数.坐标轴刻度网格线.线条类型.数据点形状标签.文本字体.颜色.大小等 ...
【Android 逆向】arm 汇编 ( 使用 IDA 解析 arm 架构的动态库文件 | 使用 IDA 打开 arm 动态库文件 | 切换 IDA 中汇编代码显示样式 )
文章目录一.使用 IDA 打开 arm 动态库文件二.切换 IDA 中汇编代码显示样式一.使用 IDA 打开 arm 动态库文件分析 Android SDK 中的 arm 架构的动态库 , 动 ...
OO实现ALV TABLE 四：ALV的显示样式
通过类CL_SALV_DISPLAY_SETTINGS我们可以设置ALV的显示样式,主要包括ALV表头名称,列表颜色间隔显示,水平线是否显示,竖线是否显示等. 1.首先我们要取得类CL_SALV_DI ...
HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
改变HTML中超链接的显示样式
更详细的内容请参考:http://www.w3school.com.cn/tags/tag_a.asp HTML中的代码如下: <a class="news_title" t ...
osg中添加自定义事件UserEvent
添加自定义事件首先osg在其内部通过osgGA::EventQueue类维护了一个事件队列,队列中的每一个事件都是一个osgGA::GUIEventAdapter对象(这个对象是用来存放所系统捕捉到 ...

layim使用中添加自定义事件与显示样式

在layim.js 中添加方法

layim使用中添加自定义事件与显示样式相关推荐

最新文章

热门文章