JQuery UI Slider - можно установить список предопределенных значений на выбор? - PullRequest
Новая
       25

JQuery UI Slider - можно установить список предопределенных значений на выбор?

3 голосов
/ 22 марта 2012

Мне интересно, возможно ли достичь этого с помощью ползунка пользовательского интерфейса jQuery.

В основном я хочу установить ползунок для 6 возрастных групп: 

16-21
22-30
31-40
41-50
51-60
60+

Пока что проблемы, которые я вижу, состоят в том, что разница в возрасте в полосах не постоянна.

Самый простой способ может быть, если я могу предоставить 6 предопределенных значений, а затем я могу изменить отображаемые значения, например:

Позволяет пользователю выбирать только 16, 22, 31, 41, 51 и 60, а затем я могу изменить то, что показано пользователю, добавив во вторую часть возрастного диапазона выражение if, т. Е. Если 16 выбран, дисплей 16-21 и т. д.

На данный момент вот что у меня есть: 

$(document).ready(function() {
    $('#age').slider({
        min: 16,
        max: 60,
        step: 1,
        animate: true,
        value: 16,
        slide:function(event,ui)
        {
          // value shown to the user
          $('#age-value').html(ui.value);

          // hidden form input where value is stored
          $('#customer-age').val(ui.value);
        }
    });
});

MARKUP 

<tr>
    <td>
        <label class="wide" for="age">What age group do you come under?</label>
    </td>
    <td>
        <div id="age"></div>
    </td>
</tr>
<tr>
    <td>
        &nbsp;
    </td>
    <td>
        <div id="age-value">16-21</div>
    </td>
</tr>

Любая помощь очень ценится.

UPDATE

Код теперь следующий: 

$('#age').slider({
    range: true,
    min: 16,
    max: 60,
    step: 1,
    animate: true,
    values: [16, 21],
    slide:function(event,ui)
    {
      $('#age-value').html(ui.value);
      $('#customer-age').val(ui.value);

      $("#age-value").html('Age Group: ' + ui.values[0] + ' - ' + ui.values[1]);

    }
});
$("#age-value").html('Age Group: ' + $("#age").slider("values", 0) + ' - ' + $("#age").slider("values", 1));

Единственное, что сейчас происходит, - это когда любой из ползунков перемещается, это заставить его привязаться к ближайшему возрастному диапазону, но не может придумать, как этого добиться. Я знаю, как установить значения, но это только начальное решение, почему возрастной диапазон является самым близким, что вызывает у меня проблемы.

ОТВЕТ

Привет всем, это то, что я сделал, чтобы решить мою проблему.

По сути, я переборщил, подумав, что мне нужны две ручки-ползунка для двух значений каждой возрастной группы, когда все, что мне нужно было сделать так (возрастные полосы немного изменились): 

$('#age').slider({
    min: 16,
    max: 50,
    step: 1,
    animate: true,
    value: 16,
    slide:function(event,ui)
    {
        if((ui.value>=16) && (ui.value<= 24))
        {
            agerange = '16 - 24';
        }
        else if((ui.value>=25)&& (ui.value<= 29))
        {
            agerange = '25 - 29';
        }
        else if((ui.value>=30) && (ui.value<=39))
        {
            agerange = '30 - 39';
        }
        else if((ui.value>=40) && (ui.value<= 49))
        {
            agerange = '40 - 49';
        }
        else if(ui.value==50)
        {
            agerange = '50 +';
        }
        $('#age-value').html(agerange);
        $('#customer-age').val(agerange);
    }
});

Ответы [ 2 ]

3 голосов
/ 22 марта 2012

Я бы исключил значения из ползунка, если это возможно: 

var ranges = ["16-21","22-30","31-40","41-50","51-60","60+"];

Установите ползунок с индексами для ваших диапазонов: 

{    
min: 0,
max: ranges.length-1,
step: 1,
animate: true,
}

И получите диапазон на основеиндекс слайдера: 

var range = ranges[$('slider').slider('value')];
1 голос
/ 22 марта 2012

Я сделал что-то подобное здесь, предполагая, что вы в порядке, когда пользователь выбирает возрастной диапазон, а не его конкретный возраст:

http://www.dataweigh.com/cubis/

По сути, вы используете значение ползунка в качестве «индекса» для массива возможных значений. Поэтому, если у вас 10 возрастных групп, установите для ползунка min значение 0, а для ползунка max - 9. Затем задайте функцию обратного вызова для использования на каждом слайде, которая выполняет поиск вашего возрастного диапазона на основе индекса. Ползунок ограничения веса является более сложным, чем то, что вам нужно, но ползунок удобочитаемости практически не работает.

Markup: 

   <li class="slider-label"><label>2. Readability Limit:</label> <span id="readability-limit-result">.1mg</span>

       <input id="readability-limit" class="slider-input" name="ReadabilityLimit" type="hidden" value=".1mg" data-values='[".0001mg", ".0002mg", ".0005mg", ".001mg", ".002mg", ".005mg", ".01mg", ".02mg", ".05mg", ".1mg", ".2mg", ".5mg", "1mg", "2mg", "5mg", "10mg", "20mg", "50mg", "100mg"]' /></li>

   <li><div id="readability-limit-slider"></div></li>

И JS: 

if ($("#readability-limit-slider").length) {
    var $readabilityLimit = $("#readability-limit");
    var $readabilityLimitResult = $("#readability-limit-result");
    var readabilityLimitData = $readabilityLimit.data();
    var readabilityLimitInitialValue = Math.round((readabilityLimitData.values.length - 2) / 2); // subtracting 2 makes it effectively round down

    $("#readability-limit-slider").slider({
        value: readabilityLimitInitialValue,
        min: 0,
        max: readabilityLimitData.values.length - 1,
        step: 1,
        slide: function (event, ui) {
            var newValue = readabilityLimitData.values[ui.value];
            $readabilityLimit.val(newValue);
            $readabilityLimitResult.text(newValue);
        }
    });

    $readabilityLimit.val(readabilityLimitData.values[readabilityLimitInitialValue]);
    $readabilityLimitResult.text(readabilityLimitData.values[readabilityLimitInitialValue]);
}
...