Question

我想在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');
});

Answer 1

您需要做大量工作才能构建自己的滑块小部件。我建议稍微延长admin .firestore() .collection(`rentals`) .where(`price`, `>=`, `1000`) .where(`price`, `<=`, `2000`)。

要解决您的问题，我会检查此代码：

$.ui.slider

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

首先，我注意到您分配的ID不是唯一的。这适用于1个滑块，但不超过1.除此之外，代码没有任何重大错误。更多的是关于你如何称呼它。有三种方法可以做到：

$(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');
});

或者：

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 UI 1.11中，新的jQuery.data()方法将使这个过程变得更加容易。

来自：Widget Method Invocation

<强>更新

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

instance()

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

jQuery Widget Factory设置选项TypeError

1 个答案: