带停止点的滑块

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);
});