jQuery UI-滑块-如何添加值 [英] jQuery UI - Slider - How to add values

问题描述

小提琴-我有一组值.是否可以在不破坏和重建幻灯片实例的情况下添加新的句柄或删除其中的某些句柄?

fiddle - I've got set of values. Is it possible to add new handle or remove some of them without destroying and rebuilding slide instance?

类似$('#slider').slider('addValueAt',5);或删除的内容.

新值不能等于实际值，因此最多不能超过12个值.

New value cannot be equal to any of actual, so there may be no more than 12 values.

我自定义的自定义代码.

Its custom code I've got 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 < 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);

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

But it only moves actual values, not removing or adding new

推荐答案

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

If you can upgrade to a version 1.10.x of jquery ui, you'd be able to do something like the following:

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

之后，您将可以像这样使用它:

After that, you'd be able to use it like so:

$("#slider").customSlider({/* options */});

并添加值:

$("#slider").customSlider('addValue', 5);

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

In this code, we're creating a new slider widget that inherits from the existing jquery-ui slider. In the addValue method, it's manually updating widget's internal array of values, and then calling the private _refresh() method of the original jQuery-ui slider, which is how the slider generates the handles in the first place when the widget is created. The _refresh() method was added in one of the more recent versions of jQuery ui. If you can't upgrade, this technique would still be possible, but you'd have to write code to inject the markup and bind the drag events.

这是一个小提琴，在操作中显示了此内容 http://jsfiddle.net/ac2A3/5/

Here's a fiddle showing this in action http://jsfiddle.net/ac2A3/5/

您处理幻灯片事件的代码将不得不稍作更改，因为它依赖于小部件的值顺序.

Your code to handle the slide event would have to change a little since it relies on the widget's values being in order.

这篇关于jQuery UI-滑块-如何添加值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！