Question

我正在编写一个HTML编辑器，用户可以从工具箱中拖放元素来构建页面。

当用户删除元素时，让我们说一个按钮，我想要一个面板显示该按钮的所有可配置选项（按钮文本，颜色，边框半径等）。

目前，也许这是错误的，我在按钮小部件中定义了所有这些选项。

我想创建一个panel.js文件，该文件将被提供给画布上放置的任何元素，查看该元素的窗口小部件选项，并将相应的表单元素呈现到元素的编辑面板中。因此panel.js看到一个按钮被添加到页面中，在其选项中查看button.js，并添加复选框和输入字段以允许用户根据这些选项的定义方式自定义按钮（布尔值），字符串，数组）。

为了做到这一点，我需要panel.js能够查看/统计button.js中定义的选项。

如何获取这些选项的列表并知道它们的关联值是布尔值，字符串还是数组？下面的小部件代码（这可能是错误的......这是我的第一次）：

$.widget('nt.button', {

    options: { 
        buttonText: "Button",
        isRaised: true,
        isPrimary: false,
        hasRipple: true,
        action: "alert('Clicked!')"
    },

    _create: function () {
        this._setOptions({
            'buttonText': this.options.buttonText,
            'isRaised': this.options.isRaised,
            'isPrimary': this.options.isPrimary,
            'hasRipple': this.options.hasRipple,
            'action': this.options.action,
        });
    },

    _destroy: function () {
        this.element.find('.legend').empty();
        this._super();
    },

    _setOption: function (key, value) {
      var self = this,
        prev = this.options[key],
        fnMap = {
          'buttonText': function () { buttonText(value, self); },
          'isRaised': function ()   { isRaised(value, self);   },
          'isPrimary': function ()  { isPrimary(value, self);  },
          'hasRipple': function ()  { hasRipple(value, self);  },
          'action': function ()  { action(value, self);  }
        };

      // base
      this._super(key, value);

      if (key in fnMap) {
        fnMap[key]();
        this._triggerOptionChanged(key, prev, value);
      }
    }

    _triggerOptionChanged: function (optionKey, previousValue, currentValue) {
      this._trigger('setOption', {type: 'setOption'}, {
        option: optionKey,
        previous: previousValue,
        current: currentValue
      });
    }
});

function buttonText(value, widget) {
    widget.text(value);
}

function isRaised(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--raised")
    }
    if(value === false) {
        return;
    }
}

function isPrimary(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--primary");
    }
    if(value === false) {
        return;
    }
}

function hasRipple(value, widget) {
    if(value === true) {
        widget.addClass("mdl-js-ripple-effect");
    }
    if(value === false) {
        return;
    }
}

function action(value, widget) {
    widget.bind("click", value);
}

Answer 1

您可以尝试以下方法：

稍微修改了nt.button。对_setOption: var self = this.element和function action(value, widget)

进行了更改

$.widget('nt.button', {

    options: { 
        buttonText: "Button",
        isRaised: true,
        isPrimary: false,
        hasRipple: true,
        action: "alert('Clicked!')"
    },

    _create: function () {
        this._setOptions({
            'buttonText': this.options.buttonText,
            'isRaised': this.options.isRaised,
            'isPrimary': this.options.isPrimary,
            'hasRipple': this.options.hasRipple,
            'action': this.options.action,
        });
    },

    _destroy: function () {
        this.element.find('.legend').empty();
        this._super();
    },

    _setOption: function (key, value) {
      var self = this.element,
        prev = this.options[key],
        fnMap = {
          'buttonText': function () { buttonText(value, self); },
          'isRaised': function ()   { isRaised(value, self);   },
          'isPrimary': function ()  { isPrimary(value, self);  },
          'hasRipple': function ()  { hasRipple(value, self);  },
          'action': function ()  { action(value, self);  }
        };

      // base
      this._super(key, value);

      if (key in fnMap) {
        fnMap[key]();
        this._triggerOptionChanged(key, prev, value);
      }
    },

    _triggerOptionChanged: function (optionKey, previousValue, currentValue) {
      this._trigger('setOption', {type: 'setOption'}, {
        option: optionKey,
        previous: previousValue,
        current: currentValue
      });
    }
});

function buttonText(value, widget) {
    widget.text(value);
}

function isRaised(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--raised")
    }
    if(value === false) {
        return;
    }
}

function isPrimary(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--primary");
    }
    if(value === false) {
        return;
    }
}

function hasRipple(value, widget) {
    if(value === true) {
        widget.addClass("mdl-js-ripple-effect");
    }
    if(value === false) {
        return;
    }
}

function action(value, widget) {
    widget.bind("click", function(){eval(value)});
}

现在，在您需要检测按钮小部件选项的其他代码中，以下代码非常有用：

var buttonOptions = $.nt.button.prototype.options;
        for(var i in buttonOptions) {
             if (buttonOptions.hasOwnProperty(i)) {
                if(buttonOptions[i] != null)
                    $("div.options").append("<div>Option Name: <b>"+i+"</b> , Default Value: <b>"+ buttonOptions[i] + "</b>, Type: <b>"+ typeof buttonOptions[i]+"</b></div></br>")
            }
        }

此处$.nt.button.prototype.options将获取为自定义按钮小部件定义的所有选项。只需确保按以下顺序加载JS文件： 1）JQuery 2）JQuery UI 3）您的自定义小部件button.js 4）在按钮小部件的拖放时调用的页面级代码。

希望这会对你有所帮助。

＆＃13;

var buttonOptions = $.nt.button.prototype.options;


		for(var i in buttonOptions) {
			 if (buttonOptions.hasOwnProperty(i)) {
			    if(buttonOptions[i] != null)
					$("div.options").append("<div>Option Name: <b>"+i+"</b> , Default Value: <b>"+ buttonOptions[i] + "</b>, Type: <b>"+ typeof buttonOptions[i]+"</b></div></br>")
			}
	    }


$(".mybutton").button();
		
		$(".changeOptions").click(function(){
			$(".mybutton").data("ntButton").option("buttonText","Updated Button Text");
			$(".mybutton").data("ntButton").option("action","alert('Newer action associated')");
		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
  $.widget('nt.button', {

    options: { 
        buttonText: "Button",
        isRaised: true,
        isPrimary: false,
        hasRipple: true,
        action: "alert('Clicked!')"
    },

    _create: function () {
        this._setOptions({
            'buttonText': this.options.buttonText,
            'isRaised': this.options.isRaised,
            'isPrimary': this.options.isPrimary,
            'hasRipple': this.options.hasRipple,
            'action': this.options.action,
        });
    },

    _destroy: function () {
        this.element.find('.legend').empty();
        this._super();
    },

    _setOption: function (key, value) {
      var self = this.element,
        prev = this.options[key],
        fnMap = {
          'buttonText': function () { buttonText(value, self); },
          'isRaised': function ()   { isRaised(value, self);   },
          'isPrimary': function ()  { isPrimary(value, self);  },
          'hasRipple': function ()  { hasRipple(value, self);  },
          'action': function ()  { action(value, self);  }
        };

      // base
      this._super(key, value);

      if (key in fnMap) {
        fnMap[key]();
        this._triggerOptionChanged(key, prev, value);
      }
    },

    _triggerOptionChanged: function (optionKey, previousValue, currentValue) {
      this._trigger('setOption', {type: 'setOption'}, {
        option: optionKey,
        previous: previousValue,
        current: currentValue
      });
    }
});

function buttonText(value, widget) {
    widget.text(value);
}

function isRaised(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--raised")
    }
    if(value === false) {
        return;
    }
}

function isPrimary(value, widget) {
    if(value === true) {
        widget.addClass("mdl-button--primary");
    }
    if(value === false) {
        return;
    }
}

function hasRipple(value, widget) {
    if(value === true) {
        widget.addClass("mdl-js-ripple-effect");
    }
    if(value === false) {
        return;
    }
}

function action(value, widget) {
    widget.unbind("click");
    widget.bind("click", function(){eval(value)});
}
</script>  


<div style="width:200px;height:100px;border:solid 1px red;">
  <div class="mybutton"></div>
	
	<div class="changeOptions">Click To Change Options</div>
</div>

<div class="options">
	<div>Button Widget has following Options:</div></br>
</div>

＆＃13;

如何跨文件访问jQuery小部件选项？

1 个答案: