jQuery UI – Slider – 如何添加值

小提琴 – 我有一套价值观。 是否可以在不破坏和重建幻灯片实例的情况下添加新句柄或删除其中一些句柄？

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

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

它的自定义代码我得到了alredy。

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

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

Answer 1

如果您可以升级到jquery ui的1.10.x版本，则可以执行以下操作：

 (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); 

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

这是一个小提琴，显示在行动http://jsfiddle.net/ac2A3/5/

处理幻灯片事件的代码必须稍微更改，因为它依赖于窗口小部件的值。