1. 程式人生 > >Jquery contextMenu右鍵選單使用

Jquery contextMenu右鍵選單使用

本部落格介紹一下一款開源的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作者的也是可以的