0

スライダー内に物理的に含めることができるよりも多くの年数を持っていて、それをきれいに見せるとどうなりますか?固定幅でスライダーを連続させる方法はありますか?

例：

スライダーの幅は 600 ピクセルです

年は100年（1900年から2000年）に対応する必要があります（スライダーの各マークは1年です）

ただし、マークの上に年を書き、見栄えを良くするために、600ピクセルで30年しか収容できません..

最初の画面: スライダーは 1900-1930 を表示します

スライダーの最後に到達するまで、スライダーのマークを動かし続ける方法はありますか?つまり、スライダー ハンドルが 1925 に達すると、スライダーは左に移動し、さらに 10 年がスライダー マークに追加されます。

ハンドルを1925に動かすと

スライダーは1910年から1940年を表示します...

私は以前にスライダーUIを広範囲に使用したことがあるので、スライダーの範囲を動的に変更できることは知っていますが、「わずかに」破壊的な体験よりも継続的なスライド体験を考えていました.

ある程度理解できたと思います...既製のタイムラインスライダーが利用できることは知っていますが、必要なものがすべて揃っているわけではありません..したがって、この質問..

どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

0

なぜあなたはこのようなものを望まないのですか？
スライダーをドラッグすると、年もスライドします。
HTML: 

<div id="yearsHolder" style="height: 20px !important; overflow-x: hidden; position: relative;"></div>
<div id="slider" style="width: 200px;"></div>
<div id="amount"></div>

Javascript (メインはslideイベント): 

var yearTextWidth = 50;
var yearsPerText = 5;// every 5 years appears text
$(function() {
    $("#slider").slider({
        min: 1900,
        max: 2000,
        step: 1,
        disabled: false,
        animate: true,
        orientation: "horizontal",
        range: false,
        value: 1900,
        create: function(event, ui) {
            var slider = $(this);
            var value = slider.slider("value");
            $("#amount").html(value);
            var sliderWidth = slider.width();
            var yearTextsLength = Math.floor(sliderWidth / yearTextWidth);// left or equal
            var yearsHolder = $("#yearsHolder");
            yearsHolder.css("width", (sliderWidth + yearTextWidth) + "px !important");
            var min = $(this).slider("option", "min");
            var max = $(this).slider("option", "max");
            var currentYear = min;
            var yearHolder;
            while (currentYear <= max) {
                yearHolder = $("<div></div>");
                yearHolder.css("text-align", "left");
                yearHolder.css("position", "absolute");
                yearHolder.css("left", (((currentYear - min) / yearsPerText) * yearTextWidth) + "px");
                yearHolder.css("width", yearTextWidth + "px !important");
                yearHolder.html(currentYear);
                yearsHolder.append(yearHolder);
                currentYear += yearsPerText;
            }
        },
        slide: function(event, ui){
            var value = ui.value;
            $("#amount").html(value);
            var slider = $(this);
            var min = slider.slider("option", "min");
            var max = slider.slider("option", "max");
            var width = slider.width();
            $.each($("#yearsHolder div"), function(index, element){
                var div = $(element);
                var currentLeft = parseInt(div.css("left"));
                var currentYear = parseInt(div.html());
                div.css("left", ((value - min) * (width / (max - min)) + ((currentYear - min) - (value - min)) * (yearTextWidth / yearsPerText)) + "px");
            });
        }
    });
});

UPDスライダーの近くに現在の年を表示するように
設定できます。yearsPerText = 1

于 2013-08-07T08:53:48.297 に答える