带停止点的滑块

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

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

• 我将所有可能的值存储在一个数组中（在我的例子中“关键帧“ 像你的 ”停止点")
• the stop()-滑块的回调会触发一个名为的函数_getClosest并设置新值
• 单击滑块下方的链接可使其直接跳转到该位置

Demo

http://jsfiddle.net/eTTM2/ 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()]);
});

如何获取最近滑动到的元素

最简单的方法是将当前滑块位置与可能的关键帧进行比较：

• 如果我已经完成一半或更远，我将移至下一个元素
• 如果我还没有到达中间，我会回到之前的元素

So _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-大批。这次我将该值乘以系数2因为演示中的滑块是200px宽，但范围为0-100:

$.each(links, function(key, value) {
    $(value).css('left', values[key] * 2);
});