Jquery contextMenu右鍵選單使用
阿新 • • 發佈：2018-12-31
本部落格介紹一下一款開源的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作者的也是可以的