2013-04-02 73 views
-1

我有同樣的問題在這裏: jQuery UI Slider: move the value along (with) the handlejQuery UI的滑塊:延遲在Chrome

我用jQuery UI的滑塊組件在我的網頁來設定的價格範圍我還可以用自己的用戶界面。 values []來設置和顯示其他div的新值 如何在句柄下看到新的值,即如果我將句柄移動到$ 100,我想在該句柄下設置「$ 100」文本

有回答(http://jsfiddle.net/william/RSkpH/1/),但我有滑塊」動畫:「慢」「功能的問題。幫助如何使用處理動畫值。移動:(http://data2.floomby.com/files/share/2_4_2013/6TZ1DOmbk2pRqvCF0nfVw.jpg

感謝

$("#slider").slider({ 
    range: true, 
    min: 100, 
    max: 500, 
    step: 10, 
    values: [100, 500], 
    animate: "slow", 
    slide: function(event, ui) { 
     var delay = function() { 
      var handleIndex = $(ui.handle).data('index.uiSliderHandle'); 
      var label = handleIndex == 0 ? '#min' : '#max'; 
      $(label).html('$' + ui.value).position({ 
       my: 'center top', 
       at: 'center bottom', 
       of: ui.handle, 
       offset: "0, 10" 
      }); 
     }; 
     // wait for the ui.handle to set its position<br> 
     setTimeout(delay, 5); 
    } 
}); 
+0

你有什麼問題'animate:「slow」'? – ohcibi

+0

值單擊滑塊時保持在相同的位置,只有當通過手柄滑動時才移動 –

回答

0

後 我的滑塊休假的垃圾,您應該使用change回調,而不是slide回調。change被炒魷魚時的滑塊的值發生變化,這就是你需要。

//... 
change: function(event, ui) { 
    var delay = function() { 
    //... 

編輯

問題是在動畫完成之前觸發了所有提供的事件。這使得在句柄移動之前將標籤實際移動到句柄下方時會有點棘手,因爲在句柄移動之前設置了值並且句柄到達其最終位置時沒有觸發捕獲的回調。

我覺得把標籤放在手柄元件內更方便。像這樣,他們將被他們自己保存在手柄下面。看到這個小提琴:http://jsfiddle.net/ohcibi/RvSgj/2/

更新

最後小提琴似乎沒有在工作鉻的Linux,出現一個奇怪的GFX錯誤(見截圖評論)。 Firefox 19.0.2,Opera 12.14和最新的Chrome for Windows都能很好地呈現它。

+0

我已經嘗試過,沒有工作。請,你能演示嗎? –

+0

我現在添加了一個工作演示 – ohcibi

+0

可能是我的錯,但我看到http://data2.floomby.com/files/share/2_4_2013/XBr8z9ZDt0WUxgMTxEjYng.jpg –