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 相关文章推荐
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
js document.write()使用介绍
Feb 21 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
BootStrap modal实现拖拽功能
Dec 01 Javascript
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 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JS模板实现方法
2013/04/03 Javascript
js中replace的用法总结
2013/12/27 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
pandas通过loc生成新的列方法
2018/11/28 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python实现的Iou与Giou代码
2020/01/18 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
逻辑链路控制协议
2016/10/01 面试题
社区中秋节活动方案
2014/01/29 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
篮球赛新闻稿
2015/07/17 职场文书
婚庆答谢词大全
2015/09/29 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
MySQL Server 层四个日志
2022/03/31 MySQL