jQuery UI - 滑块 - 如何添加值

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

就像是$('#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);

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

如果您可以升级到 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);

在此代码中，我们将创建一个继承现有 jquery-ui 滑块的新滑块小部件。在 addValue 方法中，它手动更新小部件的内部值数组，然后调用原始 jQuery-ui 滑块的私有 _refresh() 方法，这就是滑块在创建小部件时首先生成句柄的方式。 _refresh() 方法是在 jQuery ui 的最新版本之一中添加的。如果您无法升级，这种技术仍然是可能的，但您必须编写代码来注入标记并绑定拖动事件。

这是一个小提琴，展示了它的实际效果http://jsfiddle.net/ac2A3/5/

您处理幻灯片事件的代码必须稍作更改，因为它依赖于按顺序排列的小部件值。