jQuery UI - 滑块 - 如何添加值

fiddle - 我有一组值。是否有可能添加新的句柄或删除其中的一些而不破坏和重建幻灯片实例？jQuery UI - 滑块 - 如何添加值

类似$('#slider').slider('addValueAt',5);或删除。

新值不能等于任何实际值，因此可能不会超过12个值。

其自定义代码我已经得到了许可。

$(function() { 
    var handlers = [0, 2, 4 , 9, 12]; 
    $("#slider").slider({ 
     min: 0, 
     max: 12, 
     values: handlers, 
     slide: function (evt, ui) { 
      for (var i = 0, l = ui.values.length; i < l; i++) { 
       if (i !== l - 1 && ui.values[i] + 1 > ui.values[i + 1]) { 
        return false; 
       } 
       else if (i === 0 && ui.values[i] + 1 < ui.values[i - 1]) { 
        return false; 
       } 
      } 
     } 
    }); 
});

我已经试过

$("#slider").slider('option','values', newArrayOfValues);

但它只是移动的实际值，而不是删除或添加新的

来源

2013-10-13 pie6k

我没有看到任何方式来实现这个使用jQuery UI滑块中的当前功能。已经有一张票（http://bugs.jqueryui.com/ticket/4779）在他们的网站上提出这个问题。还有一种替代方法。看到这个问题：http://stackoverflow.com/questions/9590929/how-to-add-multiple-handles-to-a-jquery-slider-on-the-fly – Foreever

如果你可以升级到jQuery用户界面的1.10.x版本，你” d能够做到以下几点：

(function ($) { 
    $.widget('my-namespace.customSlider', $.ui.slider, { 
     addValue: function(val) { 
      //Add your code here for testing that the value is not in the list 
      this.options.values.push(val); 
      this._refresh(); 
     }, 
     removeValue: function() { 
      this.options.values.pop(); 
      this._refresh(); 
     } 
    }); 
})(jQuery);

之后，你可以像这样使用它：

个

$("#slider").customSlider({/* options */});

并添加值：

$("#slider").customSlider('addValue', 5);

在这段代码中，我们正在创建一个从现有的jQuery UI的滑块继承了一个新的滑块控件。在addValue方法中，它手动更新小部件的内部值数组，然后调用原始jQuery-ui滑块的private _refresh（）方法，这是创建小部件时滑块首先生成控点的方式。 _refresh（）方法被添加到jQuery ui的更新版本之一中。如果你不能升级，这种技术仍然是可能的，但你必须编写代码来注入标记并绑定拖拽事件。

这里是显示这个动作http://jsfiddle.net/ac2A3/5/

你的代码来处理幻灯片事件会有，因为它依赖于widget的值，以便为改变一点点小提琴。

来源

2014-04-01 21:55:07 Brett

jQuery UI - 滑块 - 如何添加值

回答

相关问题