Jquery系列之contextMenu右键菜单使用

原创

SmileNicky 2022-07-05 09:14:02 博主文章分类：前端技术 ©著作权

文章标签 Jquery contextMenu ico jquery javascript 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者SmileNicky的原创作品，请联系作者获取转载授权，否则将追究法律责任

本博客介绍一下一款开源的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("系统错误!");
                  }
                });       
                    }
                  }
              }
          });