javascript中layim之查找好友查找群组


Posted in Javascript onFebruary 06, 2021

目前layui官方暂没提供layim查找好友页面的结构与样式,我个人好奇心极强,自己弄了一套,现在上传与大家分享。小生不是做前端的,有些方面不够全面,请各位大神指点一二!

先呈上效果图压压惊

javascript中layim之查找好友查找群组

Layim查找好友、查找群组、添加好友、加入群组:

附上源码,积分下载

一、绑定用户成员列表

/** html代码 */
<textarea title="用户模版" id="LAY_Friend" style="display:none;">
	{{# layui.each(d.data, function(index, item){ }}
		<div class="layui-col-sm4 layui-col-md4 layui-col-lg2">
	 <div class="layui-card" >
	 	<div class="avatar">
	 		<img class="layadmin-homepage-pad-img" src="{{ item.avatar }}" />
	 	</div>
	 	<div class="units">
		 	<p>{{ item.userName }}({{ item.userCode }})</p>
		 	<p>{{ item.roleNames }}</p>
		 	<p>
			 	{{# if(item.isValid == 0){ }}
			 		<button userId="{{ item.userId }}" class="addFriend layui-btn layui-btn-xs" style="background-color:#7ADDD4;">  <strong>+</strong>  好友  </button>
			 	{{# } else { }}
			 		<span class="c_red">已经是好友</span>
			 	{{# } }}
		 	</p>
	 	</div>
	 </div>
 	</div>
 	{{# }); }}
</textarea>

/** js代码 */
$.ajax({
 type: "get",
 url: "../json/friend.json",
 async: true,
 data: data,
 success: function (data) {
 	var json = data;
 	var list = json.data;
 	if(list != null){
 		// 数据转化为html格式
			var html = laytpl(LAY_Friend.value).render({
			 data: list
			});
			control.html(html);
 	}else{
 		control.append('<div style="color:#ccc; margin:150px 350px;">没有找到符合搜索条件的用户</div>');
 	}
 }
});

二、添加好友

javascript中layim之查找好友查找群组

/**
 * 添加好友
 */
$(document).on('click', '.addFriend', function() {
	var myBut = $(this);
	var userId = myBut.attr("userId");
	// 弹出添加好友验证界面
	layim.add({
		type: 'friend'
 ,username: user.username
 ,avatar: user.avatar
 ,submit: function(group, remark, index){
			layer.msg('好友申请已发送,请等待对方确认', { icon: 1 });
			// 修改按钮
		 	myBut.parent().html('<span class="c_red">已经提交申请</span>');
		 	// 在这里插入你的推送信息代码
 } 
 });
});

三、推送信息

利用socket推送添加好友申请

// 推送一个消息
var msg = {
		type: "addMsgbox",	// 随便定义,用于在服务端区分消息类型
		sendType: 1, 		// 随便定义,用于在服务端区分消息类型
		fromId: loginUserId, 	// 申请者
		toId: user.id,			// 好友编号
		groupId: group,			// 所在分组
		remark: remark			// 验证信息
	}
websocket.send(JSON.stringify({
 	type: 'chatMsgbox' // 随便定义,用于在服务端区分消息类型
 	,data: msg
 }));

四、猜您喜欢

到此这篇关于javascript中layim之查找好友查找群组的文章就介绍到这了,更多相关layim查找好友查找群组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
JavaScript中layim之整合右键菜单的示例代码
Feb 06 #Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
如何封装Vue Element的table表格组件
Feb 06 #Vue.js
Vue实现圆环进度条的示例
Feb 06 #Vue.js
javascript实现数字时钟效果
Feb 06 #Javascript
JavaScript WeakMap使用详解
Feb 05 #Javascript
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
关于svn冲突的解决方法
2013/06/21 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python实现用户答题功能
2018/01/17 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
环境工程毕业生自荐信
2013/11/17 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
群众路线党课主持词
2014/04/01 职场文书
房屋继承公证书
2014/04/10 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
担保书格式
2015/01/20 职场文书
技术员个人工作总结
2015/03/03 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers