建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery制作右键菜单插件contextmenu

来源:易助科技网浏览量:14收藏

简介


contextMenu 是一个专门用于 Web 应用的右键菜单插件。与一般的菜单插件不同,contextMenu 不需要将其自身绑定到触发对象上。这就使得我们可以随时注入和删除触发器,而不必重新初始化或更新 contextMenu。contextMenu 可以根据需要创建菜单,即根据触发元素的不同而不同。同时还支持动态创建上下文菜单。


JQuery制作右键菜单插件contextmenu-示例图


插件特定:


多种上下文菜单触发方式:右键单击、左键单击、鼠标悬停、自定义触发事件

在触发对象添加或移除的时候,委托处理事件不需要重新初始化

按需动态创建菜单

支持命令图标(可选)

支持多种菜单输入元素:text, textarea, checkbox, radio, select

支持自定义 html 元素

支持显示/隐藏回调来更新命令的状态

即使有数百个触发对象也只占用很小的内存

自动调整菜单的位置以适应窗口

支持启用/禁用命令

支持嵌套子菜单

支持全键盘互动

支持 HTML5<menu>

支持通过 CSS 设置样式



使用


1. 引入 jquery.js 、 jquery.ui.position.js(非必须,推荐使用)、jquery.contextMenu.js 和 jquery.contextMenu.css 文件


2.  调用


<script type="text/javascript">
  $(function() {
    //初始化菜单
    $.contextMenu({
      selector: '.context-menu-one',
      callback: function(key, options) {
        console.log("点击了:" + key);
      },
      items: {
        "edit": {name: "编辑", icon: "edit"},
        "cut": {name: "剪切", icon: "cut"},
        "copy": {name: "复制", icon: "copy"},
        "paste": {name: "粘贴", icon: "paste"},
        "delete": {name: "删除", icon: "delete"},
        "sep1": "---------",
        "quit": {name: "退出", icon: function(){
          return 'context-menu-icon context-menu-icon-quit';
        }}
      }
    });
  });
</script>



相关链接


GitHub 地址 :https://github.com/swisnl/jQuery-contextMenu

官方文档 :  https://jquery-plugins.net/contextmenu-js-customizable-jquery-context-menu