一个轻量级且灵活的jQuery插件，可以轻松地将上下文菜单添加到页面上的任何DOM元素。

您所要做的就是创建一个常规的HTML无序列表，当用户右键单击该元素时，该列表就会出现。

如何使用它:

1.在文档中下载并加载jQuery contextMenu.js插件的文件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.contextmenu.js></script>
<link href="/path/to/jquery.contextmenu.css" rel="stylesheet" />

2.为上下文菜单创建一个HTML列表。

<ul id="myMenu" class="contextMenu">
  <li class="edit"><a href="#edit">Edit</a></li>
  <li class="cut separator"><a href="#cut">Cut</a></li>
  <li class="copy"><a href="#copy">Copy</a></li>
  <li class="paste"><a href="#paste">Paste</a></li>
  <li class="delete"><a href="#delete">Delete</a></li>
  <li class="quit separator"><a href="#quit">Quit</a></li>
</ul>

3.将上下文菜单附加到您指定的元素。就是这样。

$("#target").contextMenu({
  menu: 'myMenu'
},
  function(action, el, pos) {
  // onClick callback
  alert(
    'Action: ' + action + '\n\n' +
    'Element ID: ' + $(el).attr('id') + '\n\n' + 
    'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
    'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
    );
});

4.将自定义图标添加到菜单项中。

.contextMenu li.edit a { 
  background-image: url(edit.png); 
}

/* ... */

5.启用/禁用上下文菜单。

$('#target').disableContextMenu();
$('#target').enableContextMenu();

6.启用/禁用特定菜单项。

$('#target').disableContextMenuItems('#cut,#copy');
$('#target').enableContextMenuItems('#cut,#copy');

预览截图

简单 SEO友好上下文菜单jQuery插件 contextMenu.js