Jquery contextMenu右键菜单使用
Jquery contextMenu右键菜单使用
SmileNicky
发布于 2019-01-17 16:19:38
发布于 2019-01-17 16:19:38
本博客介绍一下一款开源的jquery右键菜单插件使用，github链接：https://github.com/swisnl/jQuery-contextMenu
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js" charset="utf-8"></script>
<script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script>
<script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
<link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="context-menu-one">按钮1</button>
<script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("点击了：" + key);
},
items: {
"edit": {name: "编辑", icon: "edit"},
"cut": {name: "剪切", icon: "cut"},
"copy": {name: "复制", icon: "copy"},
"paste": {name: "粘贴", icon: "paste"},
"delete": {name: "删除", icon: "delete"},
"sep1": "---------",
"quit": {name: "退出", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
});
</script>
</body>
</html>我在项目中的应用，仅供参考:
<link rel="stylesheet" href="${resource}/contextMenu/jquery.contextMenu.css" />
<script src="jquery-3.1.1.js" charset="utf-8"></script>
<script type="text/javascript" src="${resource}/contextMenu/jquery.ui.position.js"></script>
<script type="text/javascript" src="${resource}/contextMenu/jquery.contextMenu.js"></script>// 让旧版本的浏览器也能够支持<menu>标签配置
$.contextMenu('html5');
//分组树节点右键菜单事件绑定
$.contextMenu({
selector: '#div_group .list-group-item',
callback: function(key, options) {},
items: {
"rename": {
name: "重命名",
icon: "edit",
callback: function(itemKey, opt, rootMenu, originalEvent) {
var href = $('.list-group-item.node-div_group.context-menu-active a').attr('href');
var groupNodeId = href.slice(1,href.length);
top.dialog({
id: 'groupRename',
url : '${root}/group/toGroupRename.do?seq='+groupNodeId,
width: 300,
height:220,
title:'重命名',
onclose:function(){
reloadPage();
}
}).showModal();
}
},
"addRootNode":{
name: "新增根级节点",
icon: "add",
callback: function(itemKey, opt, rootMenu, originalEvent) {
top.dialog({
id: 'groupNodeAdd',
url: '${root}/group/toAddRootNode.do',
width: 300,
height: 220,
title: '新增根级节点',
onclose:function(){
reloadPage();
}
}).showModal();
}
},
"addChildNote":{
name: "新增子级节点",
icon: "add",
callback: function(itemKey, opt, rootMenu, originalEvent) {
var href = $('.list-group-item.node-div_group.context-menu-active a').attr('href');
var groupNodeId = href.slice(1,href.length);
// var groupNodeId = $.trim($("#groupNodeId").val());
top.dialog({
id: 'groupSubNodeAdd',
url: '${root}/group/toAddSubNode.do?seq='+groupNodeId,
width: 300,
height: 220,
title: '新增子级节点',
onclose:function(){
reloadPage();
}
}).showModal();
}
},
"deleteNote":{
name: "删除节点",
icon: "delete",
callback: function(itemKey, opt, rootMenu, originalEvent) {
var href = $('.list-group-item.node-div_group.context-menu-active a').attr('href');
var groupNodeId = href.slice(1,href.length);
$.ajax({
url : '${root}/group/delNode.do?seq='+groupNodeId ,
dataType : 'json',
type : 'post',
async:false,
success:function(data){
var msg = data.message;
if(data.successful == true){
alert("删除节点成功!");
window.location.reload();
}else if(msg=="sRelated"){
alert("子节点和按钮关联了，不能删除");
}else if(msg=="related"){
alert("根节点或者其子节点和按钮关联了，不能删除");
}else{
alert(msg);
}
},
error:function(error){
alert("系统错误!");
}
});
}
}
}
});实现右键菜单：
在这里插入图片描述
这里给出一篇写的很详细的中文博客：http://www.hangge.com/blog/cache/detail_1821.html，或者参考contextMenu作者的也是可以的
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年12月31日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读