javascript - 带停止点的滑块

Question

我想创建一个有一些停止点的滑块。每当我单击任何项​​目时，我都希望滑块在该点跳转并执行一些操作。我用 jQuery UI 的滑块创建了滑块。这很容易，但我不知道如何添加这些停止点。是否有现成的库，或者我应该自己实现它？如果是这样，你能帮我走上正轨吗？

Answer 1

我以前做过类似的事情。它基本上是这样工作的：

• 我将所有可能的值存储在一个数组中（在我的情况下，“关键帧”就像你的“停止点”）
• 滑块的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);
});