Question

有没有人有jquery上下文菜单的代码？按下鼠标右键时，只需在指针位置弹出一个div弹出窗口。

Answer 1

这是我发现的：

Right Click Context Menu Using Jquery and asp.net - Code Project Article

Plugins tagged Right Click Menu on Jquery website

有趣的是，dogo library有一个standard set of UI widgets，而context menu is part of that standard UI set.（dojo库很漂亮，标准外观很漂亮）

Dojo是单独的javascript库只是喜欢 JQuery。不确定dojo与 jquery是如何完全兼容的，但是如果你愿意，还有办法让它们一起工作。

主Google给了我大部分答案;）

类似的可能有用的问题：
jQuery Right-Click Context Menu Help!
jquery context menu plugin - Where is the right click event type?
JavaScript: Capturing right click and disabling menu only within certain element

Answer 2

这是一个插件： jQuery Context Menu

Answer 3

您可以使用的另一个插件是我开发的一个名为Audero Context Menu的插件。

Answer 4

这可以通过使用jQuery中的事件侦听器轻松实现，这是一种干净快捷的方法：

//Now add the jQuery
$(document).ready(function() { //Just starting up here
  var menu = $('.menu');//get the menu
  $(document).on('contextmenu', function(e) {//What this does is simply; if right-click, run function(contains an event)
    e.preventDefault();//Prevent the default action: the normal right-click-menu to show
    menu.css({
      display: 'block',//show the menu
      top: e.pageY,//make the menu be where you click (y)
      left: e.pageX//make the menu be where you click (x)
    });
  });
  $(document).click(function() { //When you left-click
    menu.css({ display: 'none' });//Hide the menu
  });
});

/* just some css to display it */
.menu {
  background: #fff;
  width: 60px;
  padding: 3px 10px;
  box-shadow: 0 0 10px -3px rgba(0, 0, 0, .3);
  border: 1px solid #ccc;
  display: none;
  position: absolute;//this is important
}

<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add some HTML for the menu -->
<div class="menu">
  <p>Option 1</p>
  <p>Option 2</p>
</div>

Answer 5

<ul>Main
  <li>Sub
    <ul>Sub
      <li>Item</li>
      <li><a href="">Link Item</a></li>
    </ul>
  </li>
</ul>

右键单击上下文菜单jquery

5 个答案: