2012-02-17 73 views
1

据我所知,如果单击滑块,jQuery UI范围滑块应该移动最近的拖动器/句柄。但在我的情况下,这似乎不会发生,只有左侧的拖动器正在移动。举个例子,你可以看到下面的代码: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)); 
}); 

而且你可以看到,例如本的jsfiddle:http://jsfiddle.net/dZ7Yg/

如果试图通过简单地点击移动向右牵引/手柄第二点滑块,你将无法做到这一点。一旦正确的拖动器到达第三点,如果你在它之前单击1px,它将不会移动到第二个点,它将在任何情况下移动左边的拖动器。

有人能帮助我吗?这怎么解决?

感谢您的帮助!

+0

你的滑块似乎在Chrome和Firefox中对我完美地工作? – kmb64 2012-02-17 21:56:15

+0

它确实如此。什么不起作用的是,当你点击滑块将正确的拖动器/手柄带到第二点时 - 你将无法做到这一点。我的小提琴确实表明了这一点。试着简单地点击靠近右边的拖动器将它带到第二点,它会卡在第三点。 – cycero 2012-02-17 21:58:01

回答

0

那些栏上的点击是有点棘手,但我认为下面是它如何工作,

条件1:左边的滑块有超过右边的滑块的优先级。

条件2:滑块移动到当您单击接近下一个位置的下一个位置。例如:在下图中,当您点击包围P1的蓝色矩形中的任意位置时,左侧滑块将移动到P1。

条件3:单击靠近滑块的任何位置都不起作用。

enter image description here

还记得那些条件和阅读下面,

当你向右移动滑块,P2,现在你想从P2向右移动滑块到P1,但是左边的滑块优先并将其移动到P1。

enter image description here

现在再次点击P1因为左滑块上P1和按条件3什么也不做不动右边的滑块。

对我来说,它看起来像范围的jQuery滑块不符合我们的预期。

+0

谢谢。有什么方法可以改变/纠正?或者,也许你可以建议一个替代范围滑块? – cycero 2012-02-17 22:38:17

+0

我能想到的唯一方法是更新插件代码以处理您希望它的行为或寻找其他jQuery插件。插件没有提供任何选项来处理这种情况。 – 2012-02-17 23:26:10