jQuery - 右键菜单插件contextMenu使用详解4（禁用菜单、菜单项）

2017-10-31 发布：hangge 阅读：2220

九、禁用/启用菜单

菜单触发对象的 contextMenu() 方法可以传递个布尔值，用来表示是否启用菜单。

true：菜单可用
false：菜单禁用

1，效果图

默认情况下右键点击“按钮1”会出现菜单。
如果勾选“禁用”复选框，再次右键点击“按钮1”则不会出现菜单。

2，样例代码

<input id="checkbox1" type="checkbox" value="101"/>
<label for="checkbox1">禁用“按钮1”菜单</label>
<br><br>
<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"},
         }
     });

     //复选框点击
     $('#checkbox1').on('click', function(e) {
       var isChecked = $(this).prop('checked');
       if(isChecked){
         $('.context-menu-one').contextMenu(false); //禁用菜单
       }else{
         $('.context-menu-one').contextMenu(true); //启用菜单
       }
     });
  });
</script>

十、禁用/启用菜单项

菜单项里有个 disabled 配置属性，表示该菜单项是否可用。

1，效果图

打开菜单后可以发现：“编辑”项可以使用，而“剪切”项变成灰色不可用。

2，样例代码

（1）我们可以直接设置 true 或者 false。

<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", disabled: false},
             "cut": {name: "剪切", icon: "cut", disabled: true},
         }
     });
  });
</script>

（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",
               disabled: function(){ return false; }
             },
             "cut": {
               name: "剪切",
               icon: "cut",
               disabled: function(){ return true; }
             },
         }
     });
  });
</script>

十一、动态改变菜单项可用状态

1，效果图

默认情况下，“剪切”项是灰色不可用的。
点击“toggle”项，可以让“剪切”项在可用和不可用这两个状态间切换。

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" },
             "cut": {
               name: "剪切",
               icon: "cut",
               disabled: function(key, opt) {
                    //this为触发对象的引用
                    return !this.data('cutDisabled');
                }
             },
             "toggle": {
                name: "Toggle",
                callback: function() {
                    //this为触发对象的引用
                    this.data('cutDisabled', !this.data('cutDisabled'));
                    return false;
                }
            }
         }
     });
  });
</script>