jQuery简单上下文菜单插件可以让你创建一个花哨的、交互式的、自定义的上下文菜单，帮助你的用户体验脱颖而出。

上下文菜单从JS数组中动态获取项目，并在右键单击目标元素时将其显示在浮动窗口中，而不会干扰页面的其余内容

参见：

• jQuery和纯JavaScript中的10个最佳上下文菜单

如何使用它:

1.在jQuery库之后下载并加载simple-context-menu.min.js脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/simple-context-menu.min.js"></script>

2.在自定义上下文菜单应该出现的目标元素上调用函数，并在选项大堆

<div class="example">
  Right Click Me
</div>

$(".element").simpleContextMenu({
  options: [
    {
      label: "Facebook",
      // use Font Awesome Iconic Font
      icon: '<i class="fa fa-facebook"></i>',
      action: () => console.log("Facebook"),
    },
    {
      label: "Twitter",
      // use PNG
      icon: '<img src="twitter.png">',
      action: () => console.log("Twitter"),
    },
    // ...
  ],
});

3.将额外的CSS类应用于上下文菜单。

$(".element").simpleContextMenu({
  class: 'myClass1 myClass2'
});

4.提供回调功能。

$(".element").simpleContextMenu({
  onShow: function () {
    console.log("Shown");
  },
  onHide: function () {
    console.log("Hidden");
  },
});

关于作者：

作者：Harun-Ur-Rashid

网站：https://laravelarticle.com/

预览截图

jQuery中 简单动态上下文菜单