Слайдер Jquery выделяет слова-метки для значений - PullRequest
Новая
       15

Слайдер Jquery выделяет слова-метки для значений

1 голос
/ 12 января 2012

Это немного похоже на проблему, опубликованную здесь: Да или нет переключателя или ползунка - но я не могу заставить решение работать в этом примере.

У меня есть ползунок горизонтального инкрементного диапазона, который я хотел бы изменить, чтобы метки декодировались в small - medium - large для значений 1 - 2 - 3

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

Вот что у меня есть: 

    <script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 1,
                max: 3,
                step: 1,
                values: [ 2, 3 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
                " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });
    </script>

, чтобы при выборе позиций 2 - 3 (как по умолчанию) метка читалась как «средний - большой».

Любая помощь или направление будет высоко ценится!

Спасибо

1 Ответ

2 голосов
/ 12 января 2012

Как насчет этого?

Он использует объект сопоставления вместо массива, но также включает функцию, которая возвращает строку вместо того, чтобы создавать ее самостоятельно: 

$(function() {

    // mapper    
    var valueMap = {
        1 : "small",
        2 : "medium",
        3 : "large",
        getText : function(arr) {
            return this[arr[0]] + " - " + this[arr[1]];
        }
    };

    // initial range slider values
    var initial = [2, 3];

    // initialize slider
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 3,
        step: 1,
        values: initial,
        slide: function( event, ui ) {
            $("#amount").val(valueMap.getText(ui.values));
        }
    });

    // initialize value display
    $("#amount").val(valueMap.getText(initial));

});
...