Question

问题：
是否有关于如何应用此上下文菜单的示例，其中包含来自现有元素的＆＃34;初始化菜单＆＃34;通过使用jsfiddle或类似的？

的信息：
- 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>

如何将ContextMenu与HTML一起使用

1 个答案: