Пользовательский интерфейс jQuery — Слайдер — Как добавить значения

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 jquery-ui jquery-ui-slider
person Adam Pietrasiak    schedule 13.10.2013    source источник
comment
Я не вижу способа добиться этого, используя текущие функции слайдера пользовательского интерфейса jQuery. Уже есть тикет (bugs.jqueryui.com/ticket/4779), поднимающий эту проблему в их сайт. Хотя есть альтернативный способ. См. этот вопрос: stackoverflow.com/questions/9590929/   -  person Foreever    schedule 01.02.2014

Ответы (1)


arrow_upward
4
arrow_downward

Если вы можете перейти на версию 1.10.x jquery ui, вы сможете сделать что-то вроде следующего:

(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 он вручную обновляет внутренний массив значений виджета, а затем вызывает закрытый метод _refresh() исходного ползунка jQuery-ui, именно так ползунок генерирует дескрипторы в первую очередь при создании виджета. Метод _refresh() был добавлен в одну из последних версий пользовательского интерфейса jQuery. Если вы не можете выполнить обновление, этот метод все равно будет возможен, но вам придется написать код для внедрения разметки и привязки событий перетаскивания.

Вот скрипт, показывающий это в действии http://jsfiddle.net/ac2A3/5/

Ваш код для обработки события слайда должен немного измениться, поскольку он зависит от порядка значений виджета.

person Brett    schedule 01.04.2014