0

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

1 回答 1

0

您将面临大量工作来构建自己的滑块小部件。我建议看看只是扩展$.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()方法将使这个过程更加容易。

来自：小部件方法调用

更新

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

$(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/

于 2017-11-21T18:02:50.630 回答