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滑块的private _refresh（）方法，这是滑块在第一个中生成句柄的方式创建窗口小部件时的位置。 _refresh（）方法是在jQuery ui的一个更新版本中添加的。如果你无法升级，这种技术仍然可行，但你必须编写代码来注入标记并绑定拖动事件。

这里有一个小提琴，显示了这一点http://jsfiddle.net/ac2A3/5/

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

jQuery UI - Slider - 如何添加值

1 个答案: