我正在以下列方式使用jQueryUI范围滑块:
$(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 ) );
});
我需要做的是 - 当您单击滑块中间时,将右侧拖动器(手柄)移动到单击的位置。目前,当您在中间单击时,左拖动器(手柄)将被拖动到该位置。有没有办法可以改变这种行为?
感谢您的帮助!
答案 0 :(得分:1)
这实际上不是它的工作方式,尽管它可能看起来像这样。它实际上检测哪个句柄最近,并选择那个。每次单击时,都会计算与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
总的来说,我认为这是可行的。正确地覆盖它可能有点困难,因为它位于包含一堆逻辑的另一个方法内的匿名函数内。你可能会,我真的真的不推荐它,但你可以修改源,只需设置最接近第二个句柄。但严重的是,不要这样做。这是一个非常糟糕的习惯。
答案 1 :(得分:1)
我知道这是一个老问题,但我遇到了同样的问题,并找到了一种更简单的方法来处理它。基本上,您需要在滑块本身上禁用指针事件,在句柄上启用它们,然后附加“点击”按钮。事件到手动移动滑块的容器div。以下是步骤:
假设这个html:
<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代码。此外,手柄上的事件仍可正常运行。
缺点是您必须手动处理滑块单击。但如上所示,这并不难做到。
无论如何,希望这对遇到此问题的其他人有用。