帶停止點的滑塊

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