1

いくつかのストップポイントを持つスライダーを作成したいと思います。アイテムをクリックするたびに、その時点でスライダーをジャンプさせて、何らかのアクションを実行したいと思います。jQueryUIのスライダーを使用してスライダーを作成しました。とても簡単ですが、これらのストップポイントを追加する方法が正確にはわかりません。このための既製のライブラリはありますか、それとも自分で実装する必要がありますか？もしそうなら、私が軌道に乗るのを手伝ってくれませんか？

ストップポイント付きスライダー

4

1 に答える 1

7

私は前にこれに似た何かをしました。基本的には次のように機能します。

  • 可能なすべての値を配列に格納します（私の場合、「ストップポイント」のような「キーフレーム」）
  • スライダーのstop()-callbackは、呼び出された関数をトリガーし_getClosest、新しい値を設定します
  • スライダーの下にあるリンクをクリックすると、その位置に直接ジャンプします

デモ

http://jsfiddle.net/eTTM2/

HTML

<div id="slider"></div>
<div id="keyframes">
    <a>|</a><a>|</a><a>|</a><a>|</a><a>|</a><a>|</a><a>|</a>
</div>

スライダー、リンク、キーフレーム

var slider = $('slider');
var links = $('#keyframes > a');
var values = [0, 10, 34, 67, 80, 85, 100];

// initiate slider
slider.slider({
    value: 0,
    min: 0,
    max: 100,
    animate: 500,
    stop: function( event, ui ) {
        slider.slider('value', _getClosest(ui.value) );
    }
});

// add click to the links
links.click(function() {
    slider.slider('value', values[$(this).index()]);
});

スライドする最も近い要素を取得する方法

最も簡単な方法は、現在のスライダーの位置を可能なキーフレームと比較することです。

  • すでに途中かそれ以上の場合は、次の要素に移動します
  • 真ん中に達していない場合は、前の要素に戻ります

したがって_getClosest()、次のようになります。

function _getClosest(value) {
    var closest = null;
    $.each(values, function(_key, _value) {
        if (closest == null || Math.abs(this-value) < Math.abs(closest-value)) {
            closest = this;
        }   
    });
    return closest;
}

値に対応するスライダーの下にリンクを配置します

リンクをそれぞれの位置に配置するには、リンクをループして、values-arrayの値に従って左オフセットを設定します。今回2は、デモのスライダーが200px広いが範囲が次の0-100とおりであるため、値に係数を掛けました。

$.each(links, function(key, value) {
    $(value).css('left', values[key] * 2);
});
于 2013-03-03T22:16:31.323 に答える