Question

我有一个名为cmenu的函数。如何在功能之外更改禁用的属性？在此代码中，仅触发else语句。如果删除else语句，则比if语句更有效。

$(".testobj").cmenu(
{
    disabled: [""]
});

$(".eachGalleryItem .folderSelectBox").click(function() {
    if ($(".eachGalleryItem-selected").length > 1) {
        $(document).cmenu({
            disabled: ["Delete"]
        });
    } else {
        $(document).cmenu({
            disabled: ["copy link"]
        });
    }
})

console.clear(); // clear console spam while writing

(function($) {
  'use strict';

  var _class = 'cmenu';

  /** 
   * @var {this} Static instance of plugin 
   */
  var _that = null;

  var _default = {
    items: [],
    disabled: []
  };

  /**
   * @description Constructor for the google button plugin
   * @param {DOM element} the selected element
   * @param {object} the contextmenu options
   */
  function Plugin(element, options) {
    this.init(element, options);
  }

  Plugin.prototype = {
    /** 
     * @description Initializes the plugin on the selected element
     * @param {DOM element} the selected element
     * @param {object} the contextmenu options
     */
    init: function(element, options) {
      _that = this;
      this.active = false;
      this.prevent_close = false;
      this.parent = $(element);
      this.options = $.extend(_default, options);
      this.set_click_event();
    },

    /**
     * @description Set the right click event
     */
    set_click_event: function() {
      var that = this;
      this.parent.contextmenu(function(e) {
        e.preventDefault();

        _that.remove_all();
        var menu = that.create_menu(that.parent, $(document.createElement('div')).addClass(_class), that);

        $('body').append(menu.css({
          left: e.pageX,
          top: e.pageY
        }));

        $(document).click(function(event) {
          if (menu.is(":hover")) {
            if (that.prevent_close) {
              that.prevent_close = false
              return;
            }

            var timer = setInterval(function() {
              menu.remove();
              clearInterval(timer);
            }, 300);
          } else menu.remove();
        });
      });
    },

    /**
     * @description Creates the contextmenu
     * @param {DOM element} the clicked element
     * @param {DOM element} the contextmenu body
     */
    create_menu: function(parent, body, plugin) {
      var options = this.options;
      $.each(options.items, function() {
        var disabled = false;
        if (options.disabled !== undefined) {
          for (var i = 0; i < options.disabled.length; i++) {
            if (!disabled)
              disabled = options.disabled[i].toLowerCase() == this.title.toLowerCase();
          }
        }
        var item = $(document.createElement('div')).addClass('item');
        var label = $(document.createElement('div')).addClass('label');
        var ripple = $(document.createElement('paper-ripple')).attr('fit', '');
        item.data({
          'disabled': disabled,
          'cmenu': plugin,
          'link': parent,
          'callback': options[this.fn]
        });
        item.append(label.html(this.title)).click(plugin.on_item_click);

        if (disabled)
          item.addClass('disabled');
        else
          item.append(ripple);

        body.append(item.prop('title', this.message));
      });
      body.contextmenu(function(e) {
        e.preventDefault()
      });
      return body;
    },

    /**
     * @description Removes all the contextmenu's from the body
     */
    remove_all: function() {
      this.prevent_close = false;
      $('body').find('.' + _class).remove();
    },

    /**
     * @description Sets the state in to prevent closing on click
     * @param {bool} flag
     * @return this
     */
    set_prevent_closing: function(flag) {
      this.prevent_close = flag;

      return this;
    },

    on_item_click: function(callback) {
      var data = $(this).data();
      if (data !== undefined) {

        var plugin = data['cmenu'];
        var disabled = data['disabled'] !== undefined ? data['disabled'] : false;
        if (plugin !== undefined)
          plugin.prevent_close = disabled

        if (!disabled && data['callback'] !== undefined && typeof data['callback'] === 'function') {
          if (data['executed'] === undefined || !data['executed']) {
            data['callback']();
            $(this).data('executed', true);
          }
        }
      }
    }
  };

  $.fn.cmenu = function(options) {
    if (!$(this).data(_class)) $(this).data(_class, new Plugin(this, options));

    return $(this).data(_class);
  }
})(jQuery);

$('.testobj').cmenu({
  items: [{
    title: 'Preview',
    message: 'Click to open the preview in a new window',
    icon: 'fa fa-eye',
    fn: 'on_preview'
  }, {
    title: 'Copy link',
    message: 'Click to copy the link to your clipboard',
    icon: 'fa fa-link',
    fn: 'on_copylink'
  }, {
    title: 'Bookmark',
    message: 'Click to add this to your bookmarks',
    icon: 'fa fa-star-o',
    fn: 'on_bookmark'
  }, {
    title: 'Delete',
    message: 'Click to delete this object',
    icon: 'fa fa-trash-o',
    fn: 'on_delete'
  }],
  on_preview: function() {
    console.log("preview")
  },
  on_copylink: function() {},
  on_bookmark: function() {},
  on_highlight: function() {},
  on_delete: function() {},
  disabled: ['copy link'] // item[title]
});

body {
  background: #eee;
}

div.testobj {
  background: #fff;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  position: relative;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.2);
}

.cmenu {
  position: absolute;
  display: inline-block;
  width: 180px;
  background-color: #fff;
  box-shadow: 1px 2px 3px #aaa;
}

.cmenu * {
  transition: color .15s, background .4s;
}

.item {
  position: relative;
  height: 48px;
  line-height: 48px;
  color: #2186fa;
  font-family: Roboto, Arial, sans-serif;
  cursor: pointer;
}

.item:last-child {
  padding-bottom: 5px;
}

.item.disabled,
.item.disabled .label {
  color: #e5e5e5;
  cursor: default;
}

.item .label {
  padding-left: 12px;
}

.item ul.options {
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 50;
  background: #fff;
  position: relative;
  left: calc(50% - 24px);
  top: -24px;
  box-shadow: 1px 2px 3px #aaa;
}

.item ul.options li {
  height: 40px;
  text-indent: 5px;
  position: relative;
}

.item ul.options li:last-child {
  border-top: 1px solid rgba(77, 144, 254, 0.2);
}

h1.title {
  font-size: 4em;
  color: #4D90FE;
}

h2.title {
  font-size: 1.2em;
  color: #4F4F4F;
}

.header-font {
  text-align: center;
  font-family: Roboto, Arial, sans-serif;
  font-weight: normal;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title header-font">Right Click</h1>
<h2 class="title header-font">Material Design Contextmenu</h2>
<div class="testobj"></div>

Answer 1

请尝试以下操作。

$(".testobj").cmenu().options.disabled = [""]

在if else语句上调用函数事件

1 个答案: