jQuery Widget Factory 设置选项 TypeError答案

【问题标题】：jQuery Widget Factory setting options TypeErrorjQuery Widget Factory 设置选项 TypeError
【发布时间】：2017-11-21 15:12:38
【问题描述】：

我想在 Widget Factory 中创建一个自定义滑块插件，但它不起作用。为什么我不能使用我创建的 .option() 函数或 .setMyOptions() 自定义函数。我得到TypeError: <function> is not a function error。我究竟做错了什么？我知道这是一些简单的语法调整，并且与作用域有关，但我不知道到底出了什么问题。

    $.widget("custom.niceSlider", {

    options: { 
        value:0
    },

    myOptions: { 
        handleWidth:'30px' 
    },

    _create: function(){
        this.element.addClass("niceSlider");
        this._bar = $("<div class='bar' id='bar'></div>")
            .appendTo(this.element);
        this._handle = $("<div class='handle' id='handle'></div>")
            .appendTo(this._bar)
            .css("width", this.myOptions.handleWidth ); 
    },

    _destroy: function(){

    },

    _setOption: function( key, value ){

    },

    setMyOptions: function(key, value){
        switch(key){
            case 'handleWidth':
                this.myOptions.handleWidth = value;
                break;
        }
    }


});

$(document).ready(function(){
    var slider = $("#slider").niceSlider();
    slider.setMyOptions('handleWidth','50px');
});

【问题讨论】：

除非是匿名函数，否则函数必须先声明为function。您正在使用 setMyOptions: function(key,value) 作为以一种奇怪的方式声明的半匿名函数。
请描述一下你是怎么称呼它的？我想你在做$(selector).niceSlider("setMyOption", "handleWidth", 100);
为什么不扩展滑块：$.widget("custom.niceSlider", $.ui.slider, {});?

标签： jquery jquery-ui jquery-plugins widget jquery-ui-widget-factory

【解决方案1】：

您将面临大量工作来构建自己的滑块小部件。我建议您稍微扩展一下$.ui.slider。

为了解决您的问题，我将检查以下代码：

$(function() {
  $.widget("custom.niceSlider", {
    options: {
      value: 0,
      max: 100,
      min: 0,
      orientation: "horizontal"
    },
    myOptions: {
      handleWidth: '30px'
    },
    _create: function() {
      this.element.addClass("ui-niceSlider ui-niceSlider-horizontal ui-widget");
      var barCount = $(".bar").length;
      barCount++;

      this._bar = $("<div>", {
          class: 'ui-niceSlider-bar ui-corner-all ui-widget-content',
          id: 'ui-niceSlider-bar-' + barCount
        })
        .appendTo(this.element);
      this._handle = $("<div>", {
          class: 'ui-niceSlider-handle ui-corner-all ui-state-default',
          id: 'ui-niceSlider-handle-' + barCount,
          style: "left: 0;"
        })
        .appendTo(this._bar)
        .css("width", this.myOptions.handleWidth);
    },
    setMyOptions: function(key, value) {
      console.log("setMyOptions", key, value);
      switch (key) {
        case 'handleWidth':
          this.myOptions.handleWidth = value;
          this.element.find(".ui-niceSlider-handle").css("width", this.myOptions.handleWidth);
          break;
      }
    }
  });
  var slider = $("#slider").niceSlider();
  slider.niceSlider("setMyOptions", 'handleWidth', '50px');
});

工作示例：https://jsfiddle.net/Twisty/q6e7t3pn/2/

首先，我注意到您分配的 ID 不是唯一的。这对于 1 个滑块很好，但不能超过 1 个。除此之外，代码没有什么大问题。更多的是关于你如何称呼它。有三种方法可以做到这一点：

var slider = $("#slider").niceSlider();
slider.niceSlider("setMyOptions", 'handleWidth', '50px');

或者：

var slider = $("#slider").niceSlider();
var niceSlider = $("#slider").data("niceSlider");
niceSlider.setMyOptions('handleWidth', '50px');

或者：

var slider = $("#slider").niceSlider();
$("#slider").niceSlider("instance").setMyOptions('handleWidth', '50px');

插件调用

要使用小部件的插件调用方法，请将方法的名称作为字符串传递。 ...如果方法需要参数，请将它们作为附加参数传递给插件。

实例调用

在底层，每个小部件的每个实例都使用jQuery.data() 存储在元素上。要检索实例对象，请使用小部件的全名作为键调用jQuery.data()。如下所示。

...

在 jQuery UI 1.11 中，新的 instance() 方法将使这个过程变得更加容易。

发件人：Widget Method Invocation

更新

您可能需要考虑更简单的解决方案：

$(function() {
  $.widget("custom.niceSlider", $.ui.slider, {
    setMyOptions: function(key, value) {
      console.log("setMyOptions", key, value);
      switch (key) {
        case 'handleWidth':
          this.options.handleWidth = value;
          this.element.find(".ui-slider-handle").css("width", this.options.handleWidth);
          break;
      }
    }
  });
  var slider = $("#slider").niceSlider();
  slider.niceSlider("setMyOptions", 'handleWidth', '50px');
});

例如：https://jsfiddle.net/Twisty/q6e7t3pn/4/

【讨论】：