带停止点的滑块

Question

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

Answer 1

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

• 我将所有可能的值存储在一个数组中（在我的情况下，“ keyframes ”，如“ stop points ”）
• stop() - 滑块的回调会触发名为_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 - 数组中的值设置左偏移量。这次我将该值乘以系数2，因为演示中的滑块宽200px但范围为0-100：

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