jQuery UI的範圍滑塊 - 在滑塊

我使用jQueryUI的範圍滑塊以下列方式中間點擊時移動右牽引（手柄）：jQuery UI的範圍滑塊 - 在滑塊

$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 4, 
     step: 1, 
     values: [ 0, 4 ], 
     slide: function(event, ui) { 
      $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
     } 
    }); 
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
     " - $" + $("#slider-range").slider("values", 1)); 
});

我需要做的是 - 當您在滑塊中點擊時，將右側拖動器（手柄）移至點擊位置。目前，當您在中間點擊時，左側拖動器（手柄）正被拖動到該位置。有什麼方法可以改變這種行爲？

感謝您的幫助！

來源

2012-02-15 cycero

這實際上並不是如何工作的，儘管它可能會出現這種情況。它實際上檢測哪個句柄是最接近的，並選擇那個句柄。每次單擊時，都會計算出BOTH句柄的距離（以像素爲單位）。它更容易看到的功能與更多的範圍內，看到這個小提琴我做：http://jsfiddle.net/gm5nm/

這裏是jQueryUI的使用功能：

this.handles.each(function(i) { 
var thisDistance = Math.abs(normValue - self.values(i)); 
if (distance > thisDistance) { 
distance = thisDistance; 
closestHandle = $(this); 
index = i; 
} 
});

來源：Line 249 of jquery.ui.slider.js

在一般情況下，我認爲這是可用。正確地覆蓋它可能有點困難，因爲它在另一個包含一堆邏輯的方法內部的匿名函數中。你可以，而且我真的不太推薦它，但是你可以修改源代碼並設置最接近第二個的句柄。但嚴重的是，不要這樣做。這是一個非常糟糕的習慣。

來源

2012-02-15 19:17:23

謝謝喬納森！ – cycero 2012-02-15 19:41:11

嗨喬納森。滑塊似乎不會移動最近的拖動器。你可以在這個jsFiddle中看到它：http://jsfiddle.net/dZ7Yg/如果你嘗試將右邊的拖動器/句柄移動到第二點，那麼你將無法做到這一點。正確的拖拉機將達到第三點並停在那裏。然後，如果您甚至點擊非常靠近右側拖動器/手柄，則左側拖動器將移動。你能給我一個關於如何解決這個問題的提示嗎？ – cycero 2012-02-17 21:56:34

@cycero問題是你只有4個可能的值。沒有什麼可以解決的，它工作得很好，即使有4個值，它仍然可以正常工作。 – 2012-02-17 22:04:01

我知道這是一個老問題，但我遇到了同樣的問題，並找出了一個更簡單的方法來處理它。基本上，您需要禁用滑塊本身的指針事件，在句柄上啓用它們，然後將「單擊」事件附加到手動移動滑塊的容器div。以下是具體步驟：

假設這個網站：

<div class="container-outer"> 
    <div class="container-inner"> 
    <div class="jquerySlider"> 
    </div> 
    </div> 
</div>

的CSS將是這樣的：

.container-inner { 
pointer-events: none; 
} 

.container-inner .ui-slider .ui-slider-handle { 
    pointer-events: auto; 
}

您的JavaScript是這樣的：

'click .container-outer': function(event) { 
    event.preventDefault(); 
    var clickPosition = event.offsetX; 
    var clickPercentage = event.offsetX/event.currentTarget.offsetWidth; 
    var sliderMax = $('.jquerySlider').slider("option","max"); 
    var newPosition = sliderMax * clickPercentage; 
    $('.jquerySlider').("values",1,newPosition); 
}

的好處是你避免搞亂jQuery代碼。另外，手柄上的事件本身仍然正常工作。

缺點是您必須手動處理滑塊自己的點擊次數。但如上所示，這並不難。

無論如何，希望這對於遇到此問題的其他人有用。

來源

2016-07-06 00:18:28 Hashcut

jQuery UI的範圍滑塊 - 在滑塊

回答

相關問題