上下文菜单有多个选择器

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

看一下文档 ，我认为每个上下文菜单只能指定一个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>