master

分支 (1)

管理

管理

master

mouseRightMenu-layui
/
index.html


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="./layui_exts/mouseRightMenu/mouseRightMenu.css" />
</head>
<style type="text/css">
	body{
		margin:10px;


	}

</style>
<body>
<script src="./layui/layui.js"></script>


	<title>右键菜单_菜单示例_enian文档库示例</title>

<style type="text/css">
	.content{
		width: 200px;
		height: 200px;
		display: inline-block;
		text-align: center;
		border: 1px solid  darkgrey ;
		margin: 10px;
	}
</style>

<h1>在以下任意框内点击鼠标左右键，弹出菜单 <a href="http://doc.enianteam.com/layui_module/48.html" style="color: #228B22;" title="点击查看使用文档">查看文档</a></h1>
<div class="content">我是1</div>
<div class="content">我是2</div>
<div class="content">我是3</div>
<div class="content">我是4</div>
<div class="content">我是5</div>
<div class="content">我是6</div>
<div class="content">我是7</div>
<div class="content">我是8</div>
<div class="content">我是9</div>
<div class="content">我是10</div>
<div class="content">我是11</div>
<div class="content">我是12</div>
<div class="content">我是13</div>
<div class="content">我是14</div>
<div class="content">我是15</div>
<div class="content">我是16</div>
<div class="content">我是17</div>
<div class="content">我是18</div>
<script type="text/javascript">
	layui.config({base: './layui_exts/mouseRightMenu/'})
	layui.use(['mouseRightMenu','layer','jquery'],function(){
		var mouseRightMenu = layui.mouseRightMenu,layer = layui.layer,$=layui.jquery;

		//左键监听
 		$('.content').click(function(){
 			var data = {content:$(this).html()}
 			var menu_data=[
				{'data':data,'type':1,'title':'左键操作1'},
				{'data':data,'type':2,'title':'左键操作2'},
				{'data':data,'type':3,'title':'左键操作3'},
				{'data':data,'type':4,'title':'左键操作4'},

			]
 			mouseRightMenu.open(menu_data,false,function(d){
 				layer.alert(JSON.stringify(d));
 			})
 		})

 		//右键监听
 		$('.content').bind("contextmenu",function(e){
			var data = {content:$(this).html()}
 			var menu_data=[
				{'data':data,'type':1,'title':'右键操作1'},
				{'data':data,'type':2,'title':'右键操作2'},
				{'data':data,'type':3,'title':'右键操作3'},
				{'data':data,'type':4,'title':'右键操作4'},

			]
 			mouseRightMenu.open(menu_data,false,function(d){
 				layer.alert(JSON.stringify(d));
 			})
			return false;
		});

	})
</script>
</body>
</html>