jQuery Slider Как мне заблокировать ручку на месте? - PullRequest
Новая
       18

jQuery Slider Как мне заблокировать ручку на месте?

2 голосов
/ 03 февраля 2010

У меня есть слайдер jQuery с двумя ручками. Я хочу заблокировать первый на месте на основе второй ручки.

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

Я заставил его работать с событием stop , но он очень неуклюжий.

Я использую объект JSON, созданный на стороне сервера, для заполнения моих ползунков. Это мой код для события остановки: 

   $(clientID).slider({
        range: true,
        max: slider.max,
        values: [slider.minVal, slider.maxVal],
        change: afterSliderChanged,
        stop: onSliderStop
    });

    function onSliderStop(event, ui) {
    for (i in sliders.sliders) {
        var slider = sliders.sliders[i];
        var clientID = slider.cellType + "_" + slider.objectID + "_null";

        if (this.id == clientID) {
            if (ui.values[0].toString() == slider.max.toString()) {
                var values = $(this).slider('option', 'values');
                $(this).slider('option', 'values', [parseInt(slider.max - 1), parseInt(values[1])]);
            }
        }
    }

У кого-нибудь есть идеи?

Дайте мне знать, если мне нужно уточнить.

Спасибо! Даниэль Брюер

Ответы [ 2 ]

1 голос
/ 03 февраля 2010

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

var offset = 40;
$('#slider').slider({
    range: true,
    max: 600,
    values: [40, 80],
    slide: function(e,ui){
        if (ui.value == ui.values[0]) {
            $(this).slider('values',1, ui.value+offset);
        } else {
            $(this).slider('values',0, ui.value-offset);
        }
    }
});

Должно помочь вам понять, как делать то, что вы хотите сделать.

Рабочий пример: http://jsfiddle.net/cBHdD/

0 голосов
/ 22 октября 2013

Вот немного менее быстрая и грязная версия jsfiddle @ PetersenDidit, которая блокирует маркеры по отношению друг к другу, а также зажимает смещение между ними на концах ползунков, поэтому диапазон не может упасть ниже maxOff. Ключ return false, чтобы jquery-ui не применял текущее значение перетаскивания: 

var max = 600;
var maxOff = 40;

$('#slider').slider({
    range: true,
    max: max,
    values: [40, 80],
    slide: function(e,ui){
        if (ui.value == ui.values[0]) {
            $(this).slider( 'values', 1, ui.value+maxOff);
            if (ui.value >= max - maxOff) {
                $(this).slider( 'values', 0, max - maxOff);
                return false;
            }
        } else {
            $(this).slider( 'values',0, ui.value-maxOff);
            if (ui.value <= maxOff) {
                $(this).slider( 'values', 1, maxOff);
                return false;
            }
        }
    }
});

http://jsfiddle.net/tbWE5/

...