jquery实现在网页指定区域显示自定义右键菜单效果

实现在网页指定区域显示自定义右键菜单效果可以使用jquery-contextmenu插件，下面是具体的攻略：

1. 引入jquery-contextmenu插件

首先需要引入该插件的js和css文件，可以在官网 https://swisnl.github.io/jQuery-contextMenu/ 上下载，也可以通过npm安装：

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="path/to/jquery.contextMenu.min.css" />

<!-- 引入JS文件 -->
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.ui.position.min.js"></script>
<script src="path/to/jquery.contextMenu.min.js"></script>

2. 创建右键菜单

在html页面中添加自定义的右键菜单内容：

<div id="menu">
  <ul>
    <li class="edit">编辑</li>
    <li class="delete">删除</li>
  </ul>
</div>

3. 绑定右键菜单

使用jquery-contextmenu插件在指定区域绑定右键菜单：

$(function() {
  $('#target').contextMenu({
    selector: '.item',
    callback: function(key, options) {
      var action = $(this).text();
      if (action == '编辑') {
        // 编辑操作
      }
      if (action == '删除') {
        // 删除操作
      }
    },
    items: {
      "edit": {name: "编辑"},
      "delete": {name: "删除"}
    }
  });
});

上述代码中，将右键菜单绑定在id为target的元素上，选择器为item，callback()函数会在选择菜单项后执行，根据选择的菜单项执行相应操作，items指定了菜单项的内容。

示例1

下面是一个例子，在table的一行tr上右键出现自定义菜单，点击菜单项进行相应操作：

<div id="menu">
  <ul>
    <li class="edit">编辑</li>
    <li class="delete">删除</li>
  </ul>
</div>

<table>
  <tr class="item">
    <td>1</td>
    <td>One</td>
    <td>First row</td>
  </tr>
  <tr class="item">
    <td>2</td>
    <td>Two</td>
    <td>Second row</td>
  </tr>
  <tr class="item">
    <td>3</td>
    <td>Three</td>
    <td>Third row</td>
  </tr>
</table>

<script>
$(function() {
  $('.item').contextMenu({
    selector: '.item',
    callback: function(key, options) {
      var action = $(this).find("td:first").text();
      if (key == 'edit') {
        alert('Edit item ' + action);
      } else if (key == 'delete') {
        $(this).remove();
      }
    },
    items: {
      "edit": {name: "编辑"},
      "delete": {name: "删除"}
    }
  });
});
</script>

示例2

下面是另一个例子，右键菜单绑定在整个页面上，根据点击元素不同显示不同的菜单：

<div id="menu">
  <ul>
    <li class="copy">复制</li>
    <li class="paste">粘贴</li>
    <li class="cut">剪切</li>
  </ul>
</div>

<div class="container">
  <h1>标题</h1>
  <p>这是一个示例</p>
</div>

<script>
$(function() {
  $.contextMenu({
    selector: 'html',
    callback: function(key, options) {
      alert(key);
    },
    items: {
      "copy": {name: "复制"},
      "paste": {name: "粘贴"},
      "cut": {name: "剪切"}
    },
    events: {
      show: function(options) {
        var target = $(options.selector);
        if (target.is("h1")) {
          this.items["cut"].disabled = true;
        } else if (target.is("p")) {
          this.items["copy"].name = "复制段落文本";
        } else {
          delete this.items["paste"];
        }
      }
    }
  });
});
</script>

上述代码中，使用$.contextMenu()方式绑定右键菜单，selector指定在整个页面上绑定菜单，通过events.show()函数根据显示菜单的元素不同，动态修改菜单项的内容。