<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>消息盒子</title>
<link rel="stylesheet" href="../../../layui.css?v=1">
<style>
.layim-msgbox{margin: 15px;}
.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
.layim-msgbox li p span{padding-left: 5px; color: #999;}
.layim-msgbox li p em{font-style: normal; color: #FF5722;}
.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
.layim-msgbox-user{padding-top: 5px;}
.layim-msgbox-content{margin-top: 3px;}
.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
</style>
</head>
<body>
<ul class="layim-msgbox" id="LAY_view"></ul>
<div style="margin: 0 15px;">
<blockquote class="layui-elem-quote">注意:这些都是模拟数据,实际使用时,需将其中的模拟接口改为你的项目真实接口。
<br>该模版文件所在目录(相对于layui.js):/css/modules/layim/html/msgbox.html</blockquote>
</div>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
if(item.from){ }}
<li data-uid="{{ item.from }}" data-fromGroup="{{ item.from_group }}">
<a href="/u/{{ item.from }}/" target="_blank">
<img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
</a>
<p class="layim-msgbox-user">
<a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
<span>{{ item.time }}</span>
</p>
<p class="layim-msgbox-content">
{{ item.content }}
<span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
</p>
<p class="layim-msgbox-btn">
<button class="layui-btn layui-btn-small" data-type="agree">同意</button>
<button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
</p>
</li>
{{# } else { }}
<li class="layim-msgbox-system">
<p><em>系统:</em>{{ item.content }}<span>{{ item.time }}</span></p>
</li>
{{# }
}); }}
</textarea>
<!--
上述模版采用了 laytpl 语法,不了解的同学可以去看下文档:http://www.layui.com/doc/modules/laytpl.html
-->
<script src="../../../../layui.js?v=1"></script>
<script>
layui.use(['layim', 'flow'], function(){
var layim = layui.layim
,layer = layui.layer
,laytpl = layui.laytpl
,$ = layui.jquery
,flow = layui.flow;
var cache = {}; //用于临时记录请求到的数据
//请求消息
var renderMsg = function(page, callback){
//实际部署时,请将下述 getmsg.json 改为你的接口地址
$.get('getmsg.json', {
page: page || 1
}, function(res){
if(res.code != 0){
return layer.msg(res.msg);
}
//记录来源用户信息
layui.each(res.data, function(index, item){
cache[item.from] = item.user;
});
callback && callback(res.data, res.pages);
});
};
//消息信息流
flow.load({
elem: '#LAY_view' //流加载容器
,isAuto: false
,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
,done: function(page, next){ //加载下一页
renderMsg(page, function(data, pages){
var html = laytpl(LAY_tpl.value).render({
data: data
,page: page
});
next(html, page < pages);
});
}
});
//打开页面即把消息标记为已读
/*
$.post('/message/read', {
type: 1
});
*/
//操作
var active = {
//同意
agree: function(othis){
var li = othis.parents('li')
,uid = li.data('uid')
,from_group = li.data('fromGroup')
,user = cache[uid];
//选择分组
parent.layui.layim.setFriendGroup({
type: 'friend'
,username: user.username
,avatar: user.avatar
,group: parent.layui.layim.cache().friend //获取好友分组数据
,submit: function(group, index){
//将好友追加到主面板
parent.layui.layim.addList({
type: 'friend'
,avatar: user.avatar //好友头像
,username: user.username //好友昵称
,groupid: group //所在的分组id
,id: uid //好友ID
,sign: user.sign //好友签名
});
parent.layer.close(index);
othis.parent().html('已同意');
//实际部署时,请开启下述注释,并改成你的接口地址
/*
$.post('/im/agreeFriend', {
uid: uid //对方用户ID
,from_group: from_group //对方设定的好友分组
,group: group //我设定的好友分组
}, function(res){
if(res.code != 0){
return layer.msg(res.msg);
}
//将好友追加到主面板
parent.layui.layim.addList({
type: 'friend'
,avatar: user.avatar //好友头像
,username: user.username //好友昵称
,groupid: group //所在的分组id
,id: uid //好友ID
,sign: user.sign //好友签名
});
parent.layer.close(index);
othis.parent().html('已同意');
});
*/
}
});
}
//拒绝
,refuse: function(othis){
var li = othis.parents('li')
,uid = li.data('uid');
layer.confirm('确定拒绝吗?', function(index){
$.post('/im/refuseFriend', {
uid: uid //对方用户ID
}, function(res){
if(res.code != 0){
return layer.msg(res.msg);
}
layer.close(index);
othis.parent().html('<em>已拒绝</em>');
});
});
}
};
$('body').on('click', '.layui-btn', function(){
var othis = $(this), type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
layuiTransfers.zip (54个子文件)
layuiTransfers
js
transfer.js 31KB
jquery.min.js 128KB
css
transfer.css 11KB
font-awesome.min.css 30KB
demo.html 6KB
layui
layui.js 7KB
layui.all.js 272KB
font
iconfont.woff2 25KB
css
layui.css 73KB
modules
laydate
default
laydate.css 7KB
code.css 1KB
layim
mobile
layim.css 9KB
voice
default.mp3 9KB
html
msgbox.html 6KB
getmsg.json 2KB
find.html 1021B
chatlog.html 3KB
layim.css 15KB
skin
2.jpg 12KB
1.jpg 18KB
5.jpg 33KB
logo.jpg 3KB
3.jpg 18KB
4.jpg 38KB
layer
default
loading-2.gif 2KB
loading-1.gif 701B
loading-0.gif 6KB
icon-ext.png 6KB
layer.css 14KB
icon.png 11KB
layui.blue.css 75KB
layui.mobile.css 10KB
lay
modules
layedit.js 12KB
tree.js 11KB
flow.js 2KB
table.js 31KB
form.js 9KB
laydate.js 27KB
rate.js 3KB
laypage.js 4KB
colorpicker.js 11KB
upload.js 7KB
layer.js 22KB
sku.js 11KB
mobile.js 31KB
code.js 1KB
slider.js 7KB
linkSelect.js 15KB
util.js 4KB
laytpl.js 2KB
transfer.js 6KB
element.js 7KB
layim.js 35KB
carousel.js 4KB
共 54 条
- 1
资源评论
weixin_37523719
- 粉丝: 4
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- (源码)基于Java的图书馆借阅系统.zip
- C#ASP.NET大型合同管理系统源码 项目合同源码数据库 SQL2008源码类型 WebForm
- (源码)基于Arduino的温湿度传感器与OLED显示屏显示系统.zip
- Type C PCB封装库 6Pin 24Pin 有公头、有母头分享下载Altium格式
- btstack协议栈-HID Mouse Classic
- (ARM-LINUX)C源码-课程设计.zip
- btstack协议栈实战篇-HID Keyboard Classic
- 自然语言处理大作业Python实现基于词典的分词方法源代码+实验报告(高分项目)
- 基于C++实现的交互界面计算器程序项目源码+详细代码注释(高分项目)
- 数据库期末作业基于Python+mysql的餐厅点餐系统源码+数据库+文档说明(高分项目)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功