1

次の Web ページでレンジ スライダーを使用していますhttp://www.mattpealing.co.uk/_concept/brdcr/calc/patient-static.html (「昼と夜のシフト」を参照)

時間と分 (15 分単位) で機能するように、次のようにカスタマイズしました。

$(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1439,
        values: [ 0, 1000 ],
        step: 15,
        slide: function(e, ui) {
            var hoursDay = Math.floor(ui.values[0] / 60);
            var minutesDay = ui.values[0] - (hoursDay * 60);

            var hoursNight = Math.floor(ui.values[1] / 60);
            var minutesNight = ui.values[1] - (hoursNight * 60);

            if(hoursDay.toString().length == 1) hoursDay = '0' + hoursDay;
            if(minutesDay.toString().length == 1) minutesDay = '0' + minutesDay;

            if(hoursNight.toString().length == 1) hoursNight = '0' + hoursNight;
            if(minutesNight.toString().length == 1) minutesNight = '0' + minutesNight;

            $('.time-day').text(hoursDay+':'+minutesDay);
            $('.time-night').text(hoursNight+':'+minutesNight);
        }
    });
});

ここで行う必要があるのは、ハンドルが重なるように設定することです。このようにして、ユーザーは、たとえば 20:00 ～ 04:00 のシフトを指定できます。また、ハンドルが重なっている場合、強調表示された青いバーは、ハンドルの中央に表示されるのではなく、それを反映する必要があります

現在、これは不可能です。

これを達成するためにどこから始めるべきかさえ考えられません。誰か提案はありますか?

4

1 に答える 1

0

いくつかのトリックを使用して、範囲スライダーを反転できます。これはクリック イベントのサンプルです:

HTML

<div id="slider-range"></div>

<div class="from time-day"></div>
<div class="to time-night"></div>

<button>Invert</button>

JS

$(document).ready(function() {

    $('button').click(function() {
        $('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');
        var timeFrom = $(".from").text();
        var timeTo = $(".to").text();
        $(".from").html(timeTo).toggleClass("time-day").toggleClass("time-night");
        $(".to").html(timeFrom).toggleClass("time-night").toggleClass("time-day");
    });

    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1439,
        values: [ 0, 1000 ],
        step: 15,
        slide: function(e, ui) {
            var hoursDay = Math.floor(ui.values[0] / 60);
            var minutesDay = ui.values[0] - (hoursDay * 60);

            var hoursNight = Math.floor(ui.values[1] / 60);
            var minutesNight = ui.values[1] - (hoursNight * 60);

            if(hoursDay.toString().length == 1) hoursDay = '0' + hoursDay;
            if(minutesDay.toString().length == 1) minutesDay = '0' + minutesDay;

            if(hoursNight.toString().length == 1) hoursNight = '0' + hoursNight;
            if(minutesNight.toString().length == 1) minutesNight = '0' + minutesNight;

            $('.time-day').text(hoursDay+':'+minutesDay);
            $('.time-night').text(hoursNight+':'+minutesNight);
        }
    });
});

働くフィドル

これ以上先に進む時間はありませんが、このコードを別のコードに適応させて、次のようなオーバーラップを検出できます。

  $( "#slider-range" ).bind( "slide", function(event, ui) {
      var values = $( "#slider-range" ).slider( "option", "values" );
      if (ui.values[0] >= ui.values[1]) {
            console.log("overlap");
      }
  });

それが役に立ったことを願っています。

于 2016-01-29T12:51:00.713 に答える