带停止点的滑块

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