jQuery UI - slider - 如何添加值

Question

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

类似 $('#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);

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

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

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

这是一个显示此操作的 fiddle http://jsfiddle.net/ac2A3/5/

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