Jquery系列之contextMenu右键菜单使用

怼烎@ 2021-09-17 11:14 316阅读 0赞

本博客介绍一下一款开源的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>

我在项目中的应用，仅供参考:

// 让旧版本的浏览器也能够支持<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("系统错误!");
    	    						}
    	    					});			  
    	                	}
    	                }
    	            }
    	        });

实现右键菜单：  
![在这里插入图片描述][20181231000256198.png]

这里给出一篇写的很详细的中文博客：http://www.hangge.com/blog/cache/detail\_1821.html，或者参考contextMenu作者的也是可以的

[20181231000256198.png]: /images/20210812/9f278a36b1b943578dc2868107d1f166.png