jQuery - 右键菜单插件contextMenu使用详解7（菜单显示位置、动画效果）

2017-11-05 发布：hangge 阅读：1935

十六、设置菜单显示的位置

默认情况下，当我们右键点击触发对象时，菜单会显示在当前鼠标的附近位置。

当然我们也可以自行修改调整菜单显示的位置。contextMenu 提供了多种设置方法，分别适用于不同情况，下面一一进行介绍。

1，使用 position 属性配置

（1）属性说明

position 属性可以配置个回调方法，当菜单触发显示时这个方法会被调用。我们可以在这里覆盖默认的菜单显示位置。该方法接收如下参数：

options：菜单上下文（通过 options.$menu 可以得到菜单元素，我们可对其设置位置）
x：菜单默认显示位置的 x 坐标
y：菜单默认显示位置的 y 坐标

（2）下面我们将菜单位置设置成 (100,0)。不管在“按钮1”上何处单击右键，菜单的位置都是固定不变的。

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

2，在 contextMenu() 方法中设置

（1）方法说明

如果菜单是通过 contextMenu() 方法调用显示的话，我们还可以直接将希望显示的位置坐标传递进来。（当然仍然通过上面的 position 属性配置也是可以的）

（2）下面代码我们点击“按钮1”时会通过 contextMenu() 方法触发“按钮2”的菜单，不过我们这里还传递了个 (100,0) 坐标，让菜单显示在该位置。

<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的菜单
       var position = { x: 100, y: 0 }
       $('.context-menu-two').contextMenu(position);
   });
  });
</script>

十七、菜单动画效果

默认情况下菜单的显示和隐藏分别是向下展开、向上收起的动画效果（可能是当前版本的 bug，菜单打开是没有动画的，而是直接就显示出来）。如果觉得默认动画不好，我们可以通过 animation 属性给菜单配置各种 jQuery 动画效果。

1，animation 属性说明

该属性设置一个对象，对象内容如下：

duration：菜单显示或消失动画的持续时间（默认值：500）
show：菜单显示动画（默认值：'slideDown'）
hide：菜单消失动画（默认值：'slideUp'）

2，使用样例

这里我们将菜单打开关闭效果修改成渐显、渐隐的形式。

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

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