CODEWITHSUNDEEP
javascriptjqueryjquery-uicontextmenu
HelloWorld1
HelloWorld1

Reputation: 14108

How to use ContextMenu with HTML

enter image description here

Questions:
Is there a sample about how to apply this contextmenu with "Initialize menu from an existing element" by using jsfiddle or similar?

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

Upvotes: 1

Views: 1037

Answers (1)

mike_t
mike_t

Reputation: 2691

Below is a showcase example snippet:

$(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>

Upvotes: 2

Related Questions