Слайдер с несколькими ручками и цветом фона для контента

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

$(function () {
        var handlers = [25, 50, 75];
        $("#slider").slider({
            min: 0,
            max: 100,
            values: handlers,
            slide: function (evt, ui) {
                for (var i = 0, l = ui.values.length; i < l; i++) {
                    if (i !== l - 1 && ui.values[i] > ui.values[i + 1]) {
                        return false;
                    }
                    else if (i === 0 && ui.values[i] < ui.values[i - 1]) {
                        return false;
                    }
                }
            }
        });
    });

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

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

Слайдер

Посоветуйте, если это возможно.


jquery jquery-ui jquery-ui-slider
person jmogera    schedule 07.05.2012    source источник
comment
Динамическая установка обработчика при загрузке обрабатывается пользовательским интерфейсом jQuery, и приведенный выше код будет работать с динамическими значениями. Он также заботится о том, чтобы обработчики не перекрывались. Раскрашивание содержимого между обработчиками не является чем-то, что встроено в пользовательский интерфейс jQuery, но это можно сделать. Лучшая идея, которую я могу придумать на данный момент, это создать абсолютно позиционированные элементы div с соответствующими background-color и динамически размещать их по мере перемещения дескрипторов. Позже я посмотрю, смогу ли я придумать конкретную реализацию. Вот отправная точка — jsfiddle.net/LLfWd.   -  person TJ VanToll    schedule 08.05.2012
comment
Спасибо. Хотелось бы увидеть конкретную реализацию! Ваша помощь очень ценится.   -  person jmogera    schedule 10.05.2012

Ответы (2)


arrow_upward
9
arrow_downward

Одной из возможностей было бы установить для фона ползунка градиент CSS и обновить остановки градиента в коде при изменении значений ползунка:

$(function () {
    // the code belows assume the colors array is exactly one element bigger 
    // than the handlers array.
    var handlers = [25, 50, 75];
    var colors = ["#ff0000", "#00ff00", "#0000ff", "#00ffff"];
    updateColors(handlers);

    $("#slider").slider({
        min: 0,
        max: 100,
        values: handlers,
        slide: function (evt, ui) {
            updateColors(ui.values);
        }
    });

    function updateColors(values) {
        var colorstops = colors[0] + ", "; // start left with the first color
            for (var i=0; i< values.length; i++) {
                colorstops += colors[i] + " " + values[i] + "%,";
                colorstops += colors[i+1] + " " + values[i] + "%,";
            }
            // end with the last color to the right
            colorstops += colors[colors.length-1];

            /* Safari 5.1, Chrome 10+ */
            var css = '-webkit-linear-gradient(left,' + colorstops + ')';
            $('#slider').css('background-image', css);
    }
});​

http://jsfiddle.net/LLfWd/60/

Этот код работает для хрома и сафари. Я предполагаю, что вам просто нужно сгенерировать несколько строк градиента (для -moz-linear-gradient, -ms-linear-gradient и т. д.), как я сделал это для -webkit-linear-gradient здесь.

person Sebastien Windal    schedule 10.09.2012

arrow_upward
2
arrow_downward

(⌐■_■) Здравствуйте, мой код, прикрепленный ниже, реализует (i) 3 дескриптора JQuery UI Slider, что означает 4 диапазона, (ii) несовпадение значений диапазона, (iii) окрашивание диапазонов, (iv) всплывающую подсказку в заголовке ручка и (v) отображение значений диапазона. Обратите внимание, что я использую старую версию JQuery. Кроме того, у него есть шаблон, который означает, что его, вероятно, можно перекодировать для элегантной поддержки >=4 дескрипторов.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Slider</title>

    <link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
</head>

<body>
    <style>
    div.demo { padding: 10px !important; };
    </style>
    <div class="demo">

        <p>
            <label>% Style:</label>
            <input type="text" id="weightage_style" style="border:0; color:#f6931f; font-weight:bold;" />
            <br />
            <label>% Design:</label>
            <input type="text" id="weightage_design" style="border:0; color:#f6931f; font-weight:bold;" />
            <br />
            <label>% Correctness:</label>
            <input type="text" id="weightage_correctness" style="border:0; color:#f6931f; font-weight:bold;" />
            <br />
            <label>% Others:</label>
            <input type="text" id="weightage_others" style="border:0; color:#f6931f; font-weight:bold;" />
            <br />
        </p>

        <div id="weightage_slider" style="font-size:12px;width:300px;"></div>

    </div>

    <script>
        $( "#weightage_slider" ).slider({ 
            min: 0,
            max: 100,
            orientation: "horizontal", 
            step: 1, 
            values: [ 10, 40, 90 ], // set three handles
            slide: function( event, ui ) {
                // NOTE: during slide, the following sequence occurs: (i) change ui.value (ii) call this function (iii) move the slider handle

                // these four lines update the display of handle ranges
                $( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) );
                $( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) );
                $( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) );
                $( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" );

                if ( ui.handle == $( "#weightage_slider_0" ).get(0) ) {
                    if(ui.values[ 0 ] >= ui.values[ 1 ]){
                        $( "#weightage_slider" ).slider('values', 0, ui.values[ 1 ]); // triggers change event
                        return false;
                    } else {
                        // handle-0 will move
                        // update display of colored handle ranges
                        $( "#weightage_slider_a" ).css('left', '0%');
                        $( "#weightage_slider_a" ).css('width', (ui.values[ 0 ] + '%'));
                        $( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%'));
                        $( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%'));
                    }
                }

                if ( ui.handle == $( "#weightage_slider_1" ).get(0) ) {
                    if(ui.values[ 1 ] <= ui.values[ 0 ]){
                        $( "#weightage_slider" ).slider('values', 1, ui.values[ 0 ]); // triggers change event
                        return false;
                    }else if(ui.values[ 1 ] >= ui.values[ 2 ]){
                        $( "#weightage_slider" ).slider('values', 1, ui.values[ 2 ]); // triggers change event
                        return false;
                    }else{
                        // handle-1 will move
                        // update display of colored handle ranges
                        $( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%'));
                        $( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%'));
                        $( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%'));
                        $( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%'));
                    }
                }

                if ( ui.handle == $( "#weightage_slider_2" ).get(0) ) {
                    if(ui.values[ 2 ] <= ui.values[ 1 ]){
                        $( "#weightage_slider" ).slider('values', 2, ui.values[ 1 ]); // triggers change event
                        return false;
                    } else{
                        // handle-2 will move
                        // update display of colored handle ranges
                        $( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%'));
                        $( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%'));
                        $( "#weightage_slider_d" ).css('left', (ui.values[ 2 ] + '%'));
                        $( "#weightage_slider_d" ).css('width', ((100 - ui.values[2]) + '%'));
                    }
                }
            }, 
            change: function( event, ui ) {
                // because slide event has function that changes handles' value programmatically, the following is necessary

                // these four lines update the display of handle ranges
                $( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) );
                $( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) );
                $( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) );
                $( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" );

                // update display of colored handle ranges
                $( "#weightage_slider_a" ).css('left', '0%');
                $( "#weightage_slider_a" ).css('width', (ui.values[ 0 ] + '%'));
                $( "#weightage_slider_b" ).css('left', (ui.values[ 0 ] + '%'));
                $( "#weightage_slider_b" ).css('width', ((ui.values[1] - ui.values[0]) + '%'));
                $( "#weightage_slider_c" ).css('left', (ui.values[ 1 ] + '%'));
                $( "#weightage_slider_c" ).css('width', ((ui.values[2] - ui.values[1]) + '%'));
                $( "#weightage_slider_d" ).css('left', (ui.values[ 2 ] + '%'));
                $( "#weightage_slider_d" ).css('width', ((100 - ui.values[2]) + '%'));
            }
        });

        // label each slider handle
        $( "#weightage_slider > a" ).each(function(index){
            $(this).attr('id', 'weightage_slider_' + index);
            $(this).attr('title', 'slider handle ' + index);    
        });

        // the following four div tags result in the display of colored handle ranges
        // the following left attributes and width attributes should be consistent with slider initialization - values array
        $('#weightage_slider').append("<div id='weightage_slider_a' class='ui-slider-range' style='left:0%;width:10%;background-color:#41d862;'></div>");
        $('#weightage_slider').append("<div id='weightage_slider_b' class='ui-slider-range' style='left:10%;width:30%;background-color:#41b7d8;'></div>");
        $('#weightage_slider').append("<div id='weightage_slider_c' class='ui-slider-range' style='left:40%;width:50%;background-color:#d841b7;'></div>");
        $('#weightage_slider').append("<div id='weightage_slider_d' class='ui-slider-range' style='left:90%;width:10%;background-color:#d86241;'></div>");

        // these four lines display the initial handle ranges
        $( "#weightage_style" ).val( "0" + " - " + $( "#weightage_slider" ).slider('values', 0) );
        $( "#weightage_design" ).val( $( "#weightage_slider" ).slider('values', 0) + " - " + $( "#weightage_slider" ).slider('values', 1) );
        $( "#weightage_correctness" ).val( $( "#weightage_slider" ).slider('values', 1) + " - " + $( "#weightage_slider" ).slider('values', 2) );
        $( "#weightage_others" ).val( $( "#weightage_slider" ).slider('values', 2) + " - " + "100" );
    </script>

</body>

Ошибка: если ручки перетаскиваются в крайнее левое положение, они «застревают», поэтому вам может понадобиться кнопка сброса для восстановления положения ручек.

person MrTan    schedule 05.10.2012