jQuery - 右键菜单插件contextMenu使用详解3（菜单触发方式、菜单事件）

2017-10-29 发布：hangge 阅读：5079

七、修改菜单打开的触发方式

默认情况下点击右键即可显示菜单，我们可以通过 trigger 配置将其修改成其它的触发方式。

1，左键触发

只要将 trigger 配置成 left，那么只有点击左键才会显示菜单（右键不出现）。

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-one',
         trigger: 'left',
         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
         }
     });
  });
</script>

2，悬停触发

如果将 trigger 设置成 hover，那么当鼠标移动到触发对象上时就会显示菜单。同时该模式通常会配合如下两个属性使用：

delay：悬停多长时间才出现菜单
autoHide：鼠标移出触发对象时自动隐藏菜单。

下面代码实现当鼠标移动到按钮上，停留 500 毫秒后自动出现菜单。鼠标从按钮上移开时又自动关闭菜单。

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-one',
         trigger: 'hover',
         delay: 500,
         autoHide: true,
         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
         }
     });
  });
</script>

3，通过代码触发（自定义触发方式）

如果将 trigger 设置成 none，那么在触发对象上不管左键还是右键点击都不会显示菜单。不过我们可以通过代码手动触发菜单打开。

下面样例我们点击“按钮1”，会在“按钮2”上打开菜单。

<button class="context-menu-one">按钮1</button>
<br><br>
<button class="context-menu-two">按钮2</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-two',
         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
         }
     });

     //按钮1点击
     $('.context-menu-one').on('click', function(e) {
       e.preventDefault();
       //触发按钮2的菜单
       $('.context-menu-two').contextMenu();
   });
  });
</script>

上面手动触发的代码也可以这么写：

$('.context-menu-two').trigger("contextmenu");

当然也可以同时指定菜单出现的位置：

//菜单显示在整个页面的(100,0)位置 
$('.context-menu-two').contextMenu({x: 100, y: 0});

4，异步菜单

下面代码仍然是通过代码打开菜单。只不过鼠标移动到按钮上，停留 1 秒后才自动出现菜单。

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
         selector: '.context-menu-one',
         trigger: 'none',
         callback: function(key, options) {
             console.log("点击了：" + key);
         },
         items: {
             "edit": {name: "编辑", icon: "edit"},
         }
     });

     //鼠标移入事件
    $('.context-menu-one').on('mouseover', function(e){
        var $this = $(this);
        var _offset = $this.offset(),
            position = {
                x: _offset.left + 10,
                y: _offset.top + 10
            }
        setTimeout(function(){ $this.contextMenu(position); }, 1000);
    });
  });
</script>

八、菜单打开/关闭事件

通过 events 节点可以配置菜单的相关事件响应。比如我们想在菜单打开的时候自动做一些事情，或者关闭的时候做一些事情，都可以在这里实现。events 中可以配置如下方法：

show：菜单显示前会被调用（如果该方法返回 false，则会阻止菜单的显示）
hide：菜单关闭前会被调用（如果该方法返回 false，则会阻止菜单的关闭）

1，效果图

我们右键打开菜单，然后点击一个菜单项，菜单自动关闭。整个流程控制台输出如下：

2，样例代码

<button class="context-menu-one">按钮1</button>

<script type="text/javascript">
  $(function() {
     //初始化菜单
     $.contextMenu({
          selector: '.context-menu-one',
          callback: function(key, options) {
             console.log("点击了：" + key);
          },
          items: {
             "edit": {name: "编辑", icon: "edit"},
          },
          events: {
              show: function(opt) {
                  console.log("菜单打开了。");
              },
              hide: function(opt) {
                  console.log("菜单关闭了。");
              }
          }
      });
  });
</script>