jq自定义浏览器右键菜单
2018-07-16 本文已影响0人
清风鹿野
jq浏览器右键自定义菜单
image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="height=device-height,initial-scale=1.0,user-scalable=no">
<title>jq + bs</title>
<link rel="stylesheet" href="static/css/normalize.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<script src="static/lib/jquery-3.2.0.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<style>
.contextmenu {
width: 120px;
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
display: none;
position: absolute;
left: 0;
top: 0;
}
.contextmenu ul {
padding: 0;
margin: 0;
}
.contextmenu li {
width: 100%;
line-height: 35px;
transition: ease .3s;
text-align: center;
font-weight: bold;
position: relative;
}
.contextmenu li:after {
content: ' ';
position: absolute;
height: 1px;
bottom: 0;
left: -40%;
width: 180%;
transform: scale(.5);
border-top: 1px solid rgba(0, 0, 0, .1);
}
.contextmenu li:hover {
background: #5cb85c;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="contextmenu">
<ul>
<li>java</li>
<li>vue</li>
<li>nodejs</li>
<li>webpack</li>
<li>jquery</li>
<li>h5</li>
</ul>
</div>
</body>
<script>
//jq自定义右键菜单
var contextmenu = {
doc: $(document),
contextmenu: $('.contextmenu'),
init: function(){
this.cancelMouseRightEvent();
this.curstormContext();
},
//取消浏览器默认右键菜单事件
cancelMouseRightEvent: function(){
this.doc.on('contextmenu',function(){
return false;
});
},
//自定义菜单
curstormContext: function(){
var self = this;
this.doc.on('mousedown',function(e){
console.log(e);
if(e.which === 3){
self.contextmenu.show().css({
top: e.pageY,
left: e.pageX
});
}
});
}
};
contextmenu.init();
</script>
</html>
