如何通过 HTML 使用上下文菜单

Question

问题：
是否有关于如何通过使用 jsfiddle 或类似工具将此上下文菜单与 "Initialize menu from an existing element" 一起应用的示例？

信息：
- https://github.com/mar10/jquery-ui-contextmenu
- https://github.com/mar10/jquery-ui-contextmenu/wiki#initialize-menu-from-an-existing-ul-element

Answer 1

下面是一个展示示例片段：

$(document).ready(function() {
  $(document).contextmenu({
    delegate: ".hasmenu",
    menu: "#options",
    select: function(event, ui) {
      console.log("option clicked")
    }
  });
});

<head>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ui-contextmenu/1.18.1/jquery.ui-contextmenu.min.js"></script>
</head>
<body>
<p  class="hasmenu">rightclick this text for context menu</p>


<ul id="options" class="ui-helper-hidden">
  <li data-command="copy"><div><span class="ui-icon ui-icon-copy"></span>Copy</div></li>
  <li data-command="paste" class="ui-state-disabled"><div>Paste</div></li>
  <li><div>----</div></li>
  <li><div>More</div>
    <ul>
      <li data-command="sub1"><div>Sub 1</div></li>
      <li data-command="sub2"><div>Sub 2</div></li>
    </ul>
    
  </li>
</ul>
</body>

如何通过 HTML 使用上下文菜单

How to use ContextMenu with HTML

javascript

jquery

jquery-ui

contextmenu