首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript中layim之整合右键菜单的示例代码

Posted in Javascript onFebruary 06, 2021

一. 效果演示

1.1、好友右键菜单：

JavaScript中layim之整合右键菜单的示例代码

1.2、分组右键菜单：

JavaScript中layim之整合右键菜单的示例代码

1.3、群组右键菜单：

JavaScript中layim之整合右键菜单的示例代码

二. 实现教程

接下来我们以好友右键菜单为例，实现步骤如下：

2.1、绑定好友右击事件：

/* 绑定好友右击事件 */
$('body').on('mousedown', '.layim-list-friend li ul li', function(e){
 // 过滤非右击事件
 if(3 != e.which) {
 	return;
 }
	// 不再派发事件
	e.stopPropagation();
	
	var othis = $(this);
 // 获取好友编号，方便后期实现功能使用（需要修改layim.js源码绑定好友编号；或者直接截取class里的好友编号，可页面F12查看）
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
	var html = [
			'<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">',
			'<li data-type="menuChat"><i class="layui-icon" ></i>'+space_icon+'发送即时消息</li>',
			'<li data-type="menuProfile"><i class="layui-icon"></i>'+space_icon+'查看资料</li>',
			'<li data-type="menuHistory"><i class="layui-icon" ></i>'+space_icon+'消息记录</li>',
			'<li data-type="menuDelete">'+space_text+'删除好友</li>',
			'<li data-type="menuMoveto">'+space_text+'移动至</li></ul>'
		].join('');
	// 弹出窗体
 layer.tips(html, othis, {
  	tips: 1
  	,time: 0
  	,shift: 5
  	,fix: true
  	,skin: 'ayui-box layui-layim-contextmenu'
 });
});

在这里已经成功绑定了右击事件，但弹框直接挡住了好友的姓名头像，不太友好，如何优化呢，我们接着往下看。

JavaScript中layim之整合右键菜单的示例代码

2.2、重置弹框位置：
接下来我们在层弹出后的成功回调方法里面重置弹框位置，在默认弹框位置的基础上，左移一定的像素，而且根据弹框里li的数量动态向下移动，如果是回话底部弹框，则弹框整体向上移动。

layer.tips(html, othis, {
 	tips: 1
 	,time: 0
 	,shift: 5
 	,fix: true
 	,skin: 'ayui-box layui-layim-contextmenu'
 	,success: function(layero){
 		// -----#开始----------- 重置弹框位置 ----------------
 	var stopmp = function (e) { stope(e); };
 	layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 		// 获取右击框li的数量
 	 var liCount = (html.split('</li>')).length;
 	 // 获取原来的弹框位置
		var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		// 位置个性调整
		top = getTipTop(1, top, liCount);
		left = 30 + parseInt(left);
 	// 移动弹框位置
		layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 		// -----#结束----------- 重置弹框位置 ----------------
 	}
});

// 获取窗口的文档显示区的高度
var currentHeight = getViewSizeWithScrollbar();
function getViewSizeWithScrollbar(){
	var clientHeight = 0;
	if(window.innerWidth){
		clientHeight = window.innerHeight;
	}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
		clientHeight = document.documentElement.offsetHeight;
	}else{ 
		clientHeight = document.documentElement.clientHeight + getScrollWith();
	} 
	clientHeight = clientHeight-180;
	return clientHeight;
}

/**
 * 计算tip定位的高度
 * @param type 类型(1好友、群组，2分组)
 * @param top 原弹框高度
 * @param liCount 弹框层中li数量
 */
var getTipTop = function (type, top, liCount) {
	liCount--;
	if(top > (currentHeight-45*liCount)){
		top = parseInt(top) - 45;
	}else{
		if(type == 1){
			top = parseInt(top) + 30*liCount - 10;
		}else{
			top = parseInt(top) + 30*(liCount - 1);
		}
	}
	return top;
};

重置弹框位置后如图，是否美观大方很多了

JavaScript中layim之整合右键菜单的示例代码

2.3、优化右击弹框事件：
当用户操作其他功能时，右键弹框层依然存在于界面中，为了提高用户体验，以下监听鼠标事件以及鼠标滚轮事件，及时关闭右键弹框层。

// 阻止浏览器默认右键点击事件
document.oncontextmenu = function() {
 return false;
}
// 点击聊天主界面事件
$('body').on('click', '.layui-layim', function(e){
 emptyTips();
});
// 右击聊天主界面事件
$('body').on('mousedown', '.layui-layim', function(e){
 emptyTips();
});
// 监听鼠标滚轮事件
$('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){
 emptyTips();
});
// 清空所有右击弹框
var emptyTips = function () {
	// 关闭右键菜单
 layer.closeAll('tips');
};

2.4、绑定右击菜单中选项的点击事件：
最后一步，绑定右击菜单中选项的点击事件，以“发送即时消息”为例子。

var $ = layui.jquery, active = {
	menuChat: function(){
		/*发送即时消息*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		console.log(mineId);
	 layim.chat({
			type: moldId == 1 ? "friend" : "group",
	 	name: '小焕',
			avatar: '好友头像，实际应用动态绑定',
			id: mineId,
			status: '好友当前离线状态'
		});
 },
 menuHistory: function(){
 	/*消息记录*/
		var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		console.log(mineId);
 }
};
$('body').on('click', '.layui-layer-tips li', function(e){
 var type = $(this).data('type');
 active[type] ? active[type].call(this) : '';
	// 清空所有右击弹框
 emptyTips();
});

到这里，恭喜您，已经大功告成啦！

三. 最后附上完整代码

// 阻止浏览器默认右键点击事件
document.oncontextmenu = function() {
 return false;
}
// 单击聊天主界面事件
$('body').on('click', '.layui-layim', function(e){
 emptyTips();
});
// 右击聊天主界面事件
$('body').on('mousedown', '.layui-layim', function(e){
 emptyTips();
});
/* 监听鼠标滚轮事件 */
$('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){
 emptyTips();
});
/* 绑定好友右击事件 */
$('body').on('mousedown', '.layim-list-friend li ul li', function(e){
	// 清空所有右击弹框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派发事件
	e.stopPropagation();
	
	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
 
	// 移除所有选中的样式
 $('.layim-list-friend li ul li').removeAttr("style","");
 // 标注为选中
 othis.css({'background-color':'rgba(0,0,0,.05)'});
 
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
 var html = [
  			'<ul id="contextmenu_'+uid + '" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">',
  			'<li data-type="menuChat"><i class="layui-icon" ></i>'+space_icon+'发送即时消息</li>',
  			'<li data-type="menuProfile"><i class="layui-icon"></i>'+space_icon+'查看资料</li>',
  			'<li data-type="menuHistory"><i class="layui-icon" ></i>'+space_icon+'消息记录</li>',
  			'<li data-type="menuDelete">'+space_text+'删除好友</li>',
  			'<li data-type="menuMoveto">'+space_text+'移动至</li></ul>'
  		].join('');
 
 layer.tips(html, othis, {
  	tips: 1
  	,time: 0
  	,shift: 5
  	,fix: true
  	,skin: 'ayui-box layui-layim-contextmenu'
  	,success: function(layero){
  	 var liCount = (html.split('</li>')).length;
  	var stopmp = function (e) { stope(e); };
  	layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
  	// 移动弹框位置
 			var top = layerobj.css('top').toLowerCase().replace('px','');
 			var left = layerobj.css('left').toLowerCase().replace('px','');
 			top = getTipTop(1, top, liCount);
 			left = 30 + parseInt(left);
 			layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
 			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
  	}
	});
});

// 清空所有右击弹框
var emptyTips = function () {
	// 移除所有好友选中的样式
 $('.layim-list-friend li ul li').removeAttr("style", "");
	// 移除所有群组选中的样式
 $('.layim-list-group li').removeAttr("style","");
	// 关闭右键菜单
 layer.closeAll('tips');
};

// 获取窗口的文档显示区的高度
var currentHeight = getViewSizeWithScrollbar();
function getViewSizeWithScrollbar(){
	var clientHeight = 0;
	if(window.innerWidth){
		clientHeight = window.innerHeight;
	}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
		clientHeight = document.documentElement.offsetHeight;
	}else{ 
		clientHeight = document.documentElement.clientHeight + getScrollWith();
	} 
	clientHeight = clientHeight-180;
	return clientHeight;
}

/**
 *计算tip定位的高度
 * @param type 类型(1好友、群组，2分组)
 * @param top 原弹框高度
 * @param liCount 弹框层中li数量
 */
var getTipTop = function (type, top, liCount) {
	liCount--;
	if(top > (currentHeight-45*liCount)){
		top = parseInt(top) - 45;
	}else{
		if(type == 1){
			top = parseInt(top) + 30*liCount - 10;
		}else{
			top = parseInt(top) + 30*(liCount - 1);
		}
	}
	return top;
};

// 绑定右击菜单中选项的点击事件
var $ = layui.jquery, active = {
	menuChat: function(){
		/*发送即时消息*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		console.log(mineId);
	 layim.chat({
			type: moldId == 1 ? "friend" : "group",
	 	name: '小焕',
			avatar: '好友头像，实际应用动态绑定',
			id: mineId,
			status: '好友当前离线状态'
		});
 },
 menuHistory: function(){
 	/*消息记录*/
		var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		console.log(mineId);
 }
};
$('body').on('click', '.layui-layer-tips li', function(e){
 var type = $(this).data('type');
 active[type] ? active[type].call(this) : '';
	// 清空所有右击弹框
	emptyTips();
});

四. 其他右击菜单代码扩展

4.1、分组右键菜单：

/* 绑定分组右击事件 */
$('body').on('mousedown', '.layim-list-friend li h5', function(e){
	// 清空所有右击弹框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派发事件
	e.stopPropagation();
	
	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
 
 var groupId = othis.data('groupid');
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
	
	var html = [
  			'<ul id="contextmenu_'+uid+'" data-id="'+groupId+'" data-index="'+groupId +'">',
  			'<li data-type="menuReset"><i class="layui-icon" ></i>'+space_icon+'刷新好友列表</li>',
  			// '<li data-type="menuOnline"><i class="layui-icon">စ</i>'+space_icon+'显示在线好友</li>',
  			'<li data-type="menuInsert">'+space_text+'添加分组</li>',
  			'<li data-type="menuRename">'+space_text+'重命名</li>',
  			'<li data-type="menuRemove" data-mold="1">'+space_text+'删除分组</li></ul>',
  		].join('');
	
 layer.tips(html, othis, {
 	tips: 1
 	,time: 0
 	,shift: 5
 	,fix: true
 	,skin: 'ayui-box layui-layim-contextmenu'
 	,success: function(layero){
 	 var liCount = (html.split('</li>')).length;
	  	var stopmp = function (e) { stope(e); };
	  	layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
	  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
	  	// 移动弹框位置
			var top = layerobj.css('top').toLowerCase().replace('px','');
			var left = layerobj.css('left').toLowerCase().replace('px','');
			top = getTipTop(2, top, liCount);
			left = 30 + parseInt(left);
			layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
 });
});

4.2、好友列表空白地方右键菜单：

/* 绑定好友列表空白地方右击事件 */
$('body').on('mousedown', '.layim-list-friend', function(e){
	// 清空所有右击弹框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派发事件
	e.stopPropagation();

	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
  
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuReset"><i class="layui-icon" ></i>'+space_icon+'刷新好友列表</li>',
  			'<li data-type="menuInsert">'+space_text+'添加分组</li></ul>',
  		].join('');
  
 layer.tips(html, othis, {
 	tips: 1
 	,time: 0
 	,shift: 5
 	,fix: true
 	,skin: 'ayui-box layui-layim-contextmenu'
 	,success: function(layero){
 	 var liCount = (html.split('</li>')).length;
	  	var stopmp = function (e) { stope(e); };
	  	layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
	  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
	  	var top = e.pageY;
	  	var left = e.pageX;
	  	var screenWidth = window.screen.width;
	  	// 根据实体情况调整位置
	  	if(screenWidth-left > 150){
	  		left = left - 30;
	  	}else if(screenWidth-left < 110){
	  		left = left - 180;
	  	}else{
	  		left = left - 130;
	  	}
	  	if(top > 816){
				top = top - 140;
	  	}else{
				top = top - 60;
	  	}
			layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
 });
});

JavaScript中layim之整合右键菜单的示例代码

4.3、群组右键菜单：

/* 绑定群聊右击事件 */
$('body').on('mousedown', '.layim-list-group li', function(e){
	// 清空所有右击弹框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派发事件
	e.stopPropagation();
	
	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
  
	// 移除所有选中的样式
 $('.layim-list-group li').removeAttr("style","");
 // 标注为选中
 othis.css({'background-color':'rgba(0,0,0,.05)'});
	
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
	var html = [
			'<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="2">',
			'<li data-type="menuChat"><i class="layui-icon" ></i>'+space_icon+'发送群消息</li>',
			'<li data-type="menuProfile"><i class="layui-icon"></i>'+space_icon+'查看群资料</li>',
			'<li data-type="menuHistory"><i class="layui-icon" ></i>'+space_icon+'消息记录</li>',
			'<li data-type="menuUpdate">'+space_text+'修改群图标</li>',
			'<li data-type="menuRemove" data-mold="2">'+space_text+'解散该群</li>',
			'<li data-type="menuSecede">'+space_text+'退出该群</li></ul>',
		].join('');
layer.tips(html, othis, {
 	tips: 1
 	,time: 0
 	,shift: 5
 	,fix: true
 	,skin: 'ayui-box layui-layim-contextmenu'
 	,success: function(layero){
 	 var liCount = (html.split('</li>')).length;
 	var stopmp = function (e) { stope(e); };
 	layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 	// 移动弹框位置
		var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		top = getTipTop(1, top, liCount);
		left = 30 + parseInt(left);
		layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
});

4.4、群组列表空白地方右键菜单：

/* 绑定群聊空白地方右击事件 */
$('body').on('mousedown', '.layim-list-groups', function(e){
	// 清空所有右击弹框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派发事件
	e.stopPropagation();

	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
 
	var uid = Date.now().toString(36);
	var space_icon = '  ';
	var space_text = '      ';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuResetGroup"><i class="layui-icon" ></i>'+space_icon+'刷新群聊列表</li>',
  			'<li data-type="menuInsertGroup">'+space_text+'创建群聊</li></ul>',
  		].join('');
  
	layer.tips(html, othis, {
		tips: 1
		,time: 0
		,shift: 5
		,fix: true
		,skin: 'ayui-box layui-layim-contextmenu'
		,success: function(layero){
		 var liCount = (html.split('</li>')).length;
			var stopmp = function (e) { stope(e); };
			layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
			var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
			var top = e.pageY;
			var left = e.pageX;
			var screenWidth = window.screen.width;
			if(screenWidth-left > 150){
				left = left - 30;
			}else if(screenWidth-left < 110){
				left = left - 180;
			}else{
				left = left - 130;
			}
			if(top > 816){
				top = top - 140;
			}else{
				top = top - 60;
			}
			layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
		}
	});
});

JavaScript中layim之整合右键菜单的示例代码

五. 总结

出于兴趣，对即时通讯挺好奇的，然后就开始接触layim，一开始每做一个功能都会遇到各种小问题，对于我来说，遇到问题若是不能及时解决，当晚便会一夜未眠，只能不断寻找资料，阅读源码，最终还是能摘到蜜甜的果实。实现功能时参考过网上大牛的博文，因此如有类同请提醒一下晚辈！
限于本人水平，如果文章和代码有表述不当之处，还请不吝赐教。

到此这篇关于JavaScript中layim之整合右键菜单的示例代码的文章就介绍到这了,更多相关layim整合右键菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

JavaScript中layim之整合右键菜单的示例代码

- Author -

踮脚敲代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Date对象格式化函数代码
Jul 17 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue实现axios图片上传功能
Aug 20 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
JavaScript 声明私有变量的两种方式
Feb 05 #Javascript
exists(2) Spring JPA(1) openEuler(1) REST(1) Switch(1) 慢日志(1) cmd(1) Spring Bean(1) mt-swipe(1) 远程桌面(2)
You might like
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Django中的Model操作表的实现
2018/07/24 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
关于python 跨域处理方式详解
2020/03/28 Python
Kate Spade澳大利亚官方网站：美国设计师手袋品牌
2019/09/10 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
文明城市创建标语
2014/06/16 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
白酒代理协议书范本
2014/10/26 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
python和anaconda的区别
2022/05/06 Python