溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

如何在JavaScript中使用layim

發(fā)布時(shí)間：2021-02-07 19:25:31 來(lái)源：億速云 閱讀：122 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在JavaScript中使用layim，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

綁定好友右擊事件：

/* 綁定好友右擊事件 */
$('body').on('mousedown', '.layim-list-friend li ul li', function(e){
 // 過(guò)濾非右擊事件
 if(3 != e.which) {
 	return;
 }
	// 不再派發(fā)事件
	e.stopPropagation();
	
	var othis = $(this);
 // 獲取好友編號(hào)，方便后期實(shí)現(xiàn)功能使用（需要修改layim.js源碼綁定好友編號(hào)；或者直接截取class里的好友編號(hào)，可頁(yè)面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" >&#xe611;</i>'+space_icon+'發(fā)送即時(shí)消息</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'查看資料</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'消息記錄</li>',
			'<li data-type="menuDelete">'+space_text+'刪除好友</li>',
			'<li data-type="menuMoveto">'+space_text+'移動(dòng)至</li></ul>'
		].join('');
	// 彈出窗體
 layer.tips(html, othis, {
  	tips: 1
  	,time: 0
  	,shift: 5
  	,fix: true
  	,skin: 'ayui-box layui-layim-contextmenu'
 });
});

2.2、重置彈框位置：
接下來(lái)我們?cè)趯訌棾龊蟮某晒卣{(diào)方法里面重置彈框位置，在默認(rèn)彈框位置的基礎(chǔ)上，左移一定的像素，而且根據(jù)彈框里li的數(shù)量動(dòng)態(tài)向下移動(dòng)，如果是回話(huà)底部彈框，則彈框整體向上移動(dòng)。

layer.tips(html, othis, {
 	tips: 1
 	,time: 0
 	,shift: 5
 	,fix: true
 	,skin: 'ayui-box layui-layim-contextmenu'
 	,success: function(layero){
 		// -----#開(kāi)始----------- 重置彈框位置 ----------------
 	var stopmp = function (e) { stope(e); };
 	layero.off('mousedowm',stopmp).on('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 		// 獲取右擊框li的數(shù)量
 	 var liCount = (html.split('</li>')).length;
 	 // 獲取原來(lái)的彈框位置
		var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		// 位置個(gè)性調(diào)整
		top = getTipTop(1, top, liCount);
		left = 30 + parseInt(left);
 	// 移動(dòng)彈框位置
		layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 		// -----#結(jié)束----------- 重置彈框位置 ----------------
 	}
});

// 獲取窗口的文檔顯示區(qū)的高度
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;
}

/**
 * 計(jì)算tip定位的高度
 * @param type 類(lèi)型(1好友、群組，2分組)
 * @param top 原彈框高度
 * @param liCount 彈框?qū)又衛(wèi)i數(shù)量
 */
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;
};

2.3、優(yōu)化右擊彈框事件：

當(dāng)用戶(hù)操作其他功能時(shí)，右鍵彈框?qū)右廊淮嬖谟诮缑嬷?，為了提高用?hù)體驗(yàn)，以下監(jiān)聽(tīng)鼠標(biāo)事件以及鼠標(biāo)滾輪事件，及時(shí)關(guān)閉右鍵彈框?qū)印?/p>

// 阻止瀏覽器默認(rèn)右鍵點(diǎn)擊事件
document.oncontextmenu = function() {
 return false;
}
// 點(diǎn)擊聊天主界面事件
$('body').on('click', '.layui-layim', function(e){
 emptyTips();
});
// 右擊聊天主界面事件
$('body').on('mousedown', '.layui-layim', function(e){
 emptyTips();
});
// 監(jiān)聽(tīng)鼠標(biāo)滾輪事件
$('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){
 emptyTips();
});
// 清空所有右擊彈框
var emptyTips = function () {
	// 關(guān)閉右鍵菜單
 layer.closeAll('tips');
};

2.4、綁定右擊菜單中選項(xiàng)的點(diǎn)擊事件：
最后一步，綁定右擊菜單中選項(xiàng)的點(diǎn)擊事件，以“發(fā)送即時(shí)消息”為例子。

var $ = layui.jquery, active = {
	menuChat: function(){
		/*發(fā)送即時(shí)消息*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		console.log(mineId);
	 layim.chat({
			type: moldId == 1 ? "friend" : "group",
	 	name: '小煥',
			avatar: '好友頭像，實(shí)際應(yīng)用動(dòng)態(tài)綁定',
			id: mineId,
			status: '好友當(dāng)前離線(xiàn)狀態(tài)'
		});
 },
 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();
});

到這里，恭喜您，已經(jīng)大功告成啦！

三. 最后附上完整代碼

// 阻止瀏覽器默認(rèn)右鍵點(diǎn)擊事件
document.oncontextmenu = function() {
 return false;
}
// 單擊聊天主界面事件
$('body').on('click', '.layui-layim', function(e){
 emptyTips();
});
// 右擊聊天主界面事件
$('body').on('mousedown', '.layui-layim', function(e){
 emptyTips();
});
/* 監(jiān)聽(tīng)鼠標(biāo)滾輪事件 */
$('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;
 }
	// 不再派發(fā)事件
	e.stopPropagation();
	
	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
 
	// 移除所有選中的樣式
 $('.layim-list-friend li ul li').removeAttr("style","");
 // 標(biāo)注為選中
 othis.css({'background-color':'rgba(0,0,0,.05)'});
 
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 var html = [
  			'<ul id="contextmenu_'+uid + '" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">',
  			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'發(fā)送即時(shí)消息</li>',
  			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'查看資料</li>',
  			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'消息記錄</li>',
  			'<li data-type="menuDelete">'+space_text+'刪除好友</li>',
  			'<li data-type="menuMoveto">'+space_text+'移動(dòng)至</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');
  	// 移動(dòng)彈框位置
 			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","");
	// 關(guān)閉右鍵菜單
 layer.closeAll('tips');
};

// 獲取窗口的文檔顯示區(qū)的高度
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;
}

/**
 *計(jì)算tip定位的高度
 * @param type 類(lèi)型(1好友、群組，2分組)
 * @param top 原彈框高度
 * @param liCount 彈框?qū)又衛(wèi)i數(shù)量
 */
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;
};

// 綁定右擊菜單中選項(xiàng)的點(diǎn)擊事件
var $ = layui.jquery, active = {
	menuChat: function(){
		/*發(fā)送即時(shí)消息*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('mold');
		console.log(mineId);
	 layim.chat({
			type: moldId == 1 ? "friend" : "group",
	 	name: '小煥',
			avatar: '好友頭像，實(shí)際應(yīng)用動(dòng)態(tài)綁定',
			id: mineId,
			status: '好友當(dāng)前離線(xiàn)狀態(tài)'
		});
 },
 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();
});

四. 其他右擊菜單代碼擴(kuò)展

4.1、分組右鍵菜單：

/* 綁定分組右擊事件 */
$('body').on('mousedown', '.layim-list-friend li h6', function(e){
	// 清空所有右擊彈框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派發(fā)事件
	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 = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	
	var html = [
  			'<ul id="contextmenu_'+uid+'" data-id="'+groupId+'" data-index="'+groupId +'">',
  			'<li data-type="menuReset"><i class="layui-icon" >&#xe669;</i>'+space_icon+'刷新好友列表</li>',
  			// '<li data-type="menuOnline"><i class="layui-icon">&#x1005;</i>'+space_icon+'顯示在線(xiàn)好友</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');
	  	// 移動(dòng)彈框位置
			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;
 }
	// 不再派發(fā)事件
	e.stopPropagation();

	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
  
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuReset"><i class="layui-icon" >&#xe669;</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;
	  	// 根據(jù)實(shí)體情況調(diào)整位置
	  	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'});
 	}
 });
});

4.3、群組右鍵菜單：

/* 綁定群聊右擊事件 */
$('body').on('mousedown', '.layim-list-group li', function(e){
	// 清空所有右擊彈框
 emptyTips();
 if(3 != e.which) {
 	return;
 }
	// 不再派發(fā)事件
	e.stopPropagation();
	
	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
  
	// 移除所有選中的樣式
 $('.layim-list-group li').removeAttr("style","");
 // 標(biāo)注為選中
 othis.css({'background-color':'rgba(0,0,0,.05)'});
	
	var mineId = $(this).data('mineid');
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
			'<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="2">',
			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'發(fā)送群消息</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'查看群資料</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'消息記錄</li>',
			'<li data-type="menuUpdate">'+space_text+'修改群圖標(biāo)</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');
 	// 移動(dòng)彈框位置
		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;
 }
	// 不再派發(fā)事件
	e.stopPropagation();

	var othis = $(this);
 if (othis.hasClass('layim-null')) return;
 
	var uid = Date.now().toString(36);
	var space_icon = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuResetGroup"><i class="layui-icon" >&#xe669;</i>'+space_icon+'刷新群聊列表</li>',
  			'<li data-type="menuInsertGroup">'+space_text+'創(chuàng)建群聊</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了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手