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;
               
        }
	};
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值