jQuery UI - 滑块 - 如何添加值

Question

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

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

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

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

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