Question

如何针对不同元素设置两个不同的上下文菜单？我尝试了这个但是虽然我没有收到错误，但它不起作用：

$(function(){
  $.contextMenu({
    selector: '.dragIndiv, .dragGroup', 
    autoHide: 'true',
    callback: function(key, options) {
      // do something
    },
    items: {
      "amend"   : {name: "Amend", icon: "amend"},
      "relate"  : {name: "Relate", icon: "relate"}
    },
    selector: '#elementPallet', 
    autoHide: 'true',
    callback: function(key, options) {
      // do something else
    },
    items: {
      "submit" : {name: "Submit", icon: "aligntop"},
      "viewSource": {name: "View source", icon: "alignleft"},
    }
  });
});

Answer 1

查看docs，我认为您只能为每个上下文菜单指定一个items选项。那么你不能只创建两个上下文菜单吗？

$(function(){
  // first context menu
  $.contextMenu({
    selector: '.dragIndiv, .dragGroup', 
    autoHide: 'true',
    callback: function(key, options) {
      // do something
    },
    items: {
      "amend"   : {name: "Amend", icon: "amend"},
      "relate"  : {name: "Relate", icon: "relate"}
    }
  });
  
  // second context menu
  $.contextMenu({
    selector: '#elementPallet', 
    autoHide: 'true',
    callback: function(key, options) {
      // do something else
    },
    items: {
      "submit" : {name: "Submit", icon: "aligntop"},
      "viewSource": {name: "View source", icon: "alignleft"},
    }
  });
});

div{
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.js"></script>

<div>
  <div class="dragIndiv">Individual</div>
  <div class="dragGroup">Group</div>
  <div id="elementPallet">Pallet</div>
</div>

Answer 2

这是我在这里工作的更复杂的上下文菜单（使用isim的解决方案）但在我的实时环境中不起作用（忽略第二个菜单）： -

    $(function(){
      // first context menu
      $.contextMenu({
        selector: '.dragIndiv, .dragGroup', 
        autoHide: 'true',
        callback: function(key, options) {
          // do something
        },
        items: {
          "amend"    : {name: "Amend", icon: "amend"},
          "relate"   : {name: "Relate", icon: "relate"},
          "hide"     : {name: "Hide", icon: "hide"},
          "delete"   : {name: "Delete", icon: "delete"},
          "sep1"     : "---------",
          "submenu1" : {name: "Align",
            items: {
              "aligntop" : {name: "Top", icon: "aligntop"},
              "alignleft": {name: "Left", icon: "alignleft"},
              "alignbtm" : {name: "Bottom", icon: "alignbtm"},
              "alignrght": {name: "Right", icon: "alignrght"}
            }
          },
          "sep2"     : "---------",
          "submenu2" : {name: "Grid",
            items: {
              "gridon"   : {name: "Grid on", icon: "gridon"},
              "gridoff"  : {name: "Grid off", icon: "gridoff"},
              "gridshow" : {name: "Grid show", icon: "gridshow"},
              "gridhide" : {name: "Grid hide", icon: "gridhide"}
            }
          }
        }
      });

      // second context menu
      $.contextMenu({
        selector: '#elementPallet', 
        autoHide: 'true',
        callback: function(key, options) {
          // do something else
        },
        items: {
          "submit"     : {name: "Submit", icon: "submit"},
          "viewSource" : {name: "View source", icon: "viewsource"},
          "runQuery"   : {name: "Run query", icon: "runquery"},
          "manage"     : {name: "Manage tables", icon: "mtables"}
        }
      });
    });

    div{
      margin:5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/1.6.5/jquery.contextMenu.min.js"></script>
    
    
    <div>
      <div class="dragIndiv">Individual</div>
      <div class="dragGroup">Group</div>
      <div id="elementPallet">Pallet</div>
    </div>

上下文菜单的多个选择器

2 个答案: