jQuery UI путаница нескольких слайдеров со значениями - PullRequest
Новая
       19

jQuery UI путаница нескольких слайдеров со значениями

2 голосов
/ 27 февраля 2012

Я использую в течение короткого времени утилиту пользовательского слайдера и закончилась следующей ситуацией. У меня есть три ползунка, чтобы использовать их результат и изменить css box-shadow объекта. Это мой код: 

$('#slider2, #slider3, #slider4').slider({
    range: 'min',
    min: 0,
    max: 100,
    step: 1,
    animate: true,
    slide: function(x,y,z) {
        var x = $('#slider2').slider('value'),
            y = $('#slider3').slider('value'),
            z = $('#slider4').slider('value')
        $('#xShadowValue').val(x + ' px');
        $('#yShadowValue').val(y + ' px');
        $('#zShadowValue').val(z + ' px');          
        $('#target').css('box-shadow', x + 'px ' + y + 'px ' + z + 'px ' + '#888888');
    }
});

$('#xShadowValue').val($('#slider2').slider('value') + ' px');
$('#yShadowValue').val($('#slider3').slider('value') + ' px');
$('#zShadowValue').val($('#slider4').slider('value') + ' px');

Проблема в том, когда я меняю первый, все в порядке. Когда я меняю второе, первое падает или увеличивает единицу, когда я меняю третье происходит для второго. Кроме того, я не могу сдвинуть их все к 0 или 100. Ограничение появляется в 1 и 99 соответственно. Спасибо заранее.

1 Ответ

2 голосов
/ 27 февраля 2012

Причина этого заключается в том, что вы используете $("#slider").slider("value") для получения значения.

Это не , упомянутое в документации из того, что я мог видеть, но согласно примечанию в этом билете об ошибке , вы должны использовать ui.value, чтобы получить новое значение ползунка и метод value для получения старого значения ползунка. Это объясняет обе ваши проблемы.

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

Я бы изменил две вещи:

  1. Используйте атрибуты data-*, чтобы указать, какой слайдер соответствует какой оси: 

    <div id="slider2" class="slider" data-axis="x"></div>
<div id="slider3" class="slider" data-axis="y"></div>
<div id="slider4" class="slider" data-axis="z"></div>

  2. Обновите ваш slide обратный вызов, чтобы использовать эти атрибуты: 

    var boxShadow = {
    x: 0,
    y: 0,
    z: 0
};

$('#slider2, #slider3, #slider4').slider({
    step: 1,
    animate: true,
    slide: function(event, ui) {
        var axis = $(this).data("axis");

        boxShadow[axis] = ui.value;

        $('#xShadowValue').val(boxShadow.x + ' px');
        $('#yShadowValue').val(boxShadow.y + ' px');
        $('#zShadowValue').val(boxShadow.z + ' px');            

        $('#target').css('box-shadow', boxShadow.x + 'px ' + boxShadow.y + 'px ' + boxShadow.z + 'px ' + '#888888');
    }
});

По сути, сохраняйте простой объект, который отслеживает x, y и z. Этот объект легко обновляется с использованием вышеупомянутых атрибутов data-*.

Пример: http://jsfiddle.net/t3gva/

...