我正在使用 jQuery ui-slider。在范围 slider 中,如果我使用两个 handle 选择相同的范围,则一个 handle 会隐藏在另一个 handle 后面。如果选择了相同的范围,我只想满足两个 handle 的要求。请帮助我。
$("#dvSliderRange2").slider({
range: true,
min: 0,
max: 100,
values: [20, 40],
step: 10,
slide: function(event, ui) {
if (ui.values[0] == ui.values[1]) {
return false;
}
$("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
}
});
最佳答案
我有一个使用下面一些CSS的解决方案。当它们相等时,这会向元素添加一个类。然后 CSS 定位这些句柄,使它们都可见。
http://jsfiddle.net/dhQk/jTx89/
但是,在交互性的情况下。如果不对 slider 代码进行一些修改,这是不可能的。我已经包含了 jquery slider 1.10.2 的 src。从 src 的第 176 行开始。
this.handles.each(function( i ) {
var thisDistance = Math.abs( normValue - that.values(i) );
if (( distance > thisDistance ) ||
( distance === thisDistance &&
(i === that._lastChangedValue || that.values(i) === o.min ))) {
distance = thisDistance;
closestHandle = $( this );
index = i;
}
});
从这里可以看出, handle 实际上并不是根据您选择的 handle 来选择的,而是通过编程方式根据您单击的位置的距离来选择的。不知道为什么他们决定这样做,但一旦它们具有相同的值,它就不允许您单独与它们交互;
关于jquery - 使用具有相同 handle 值且不重叠的 jQuery ui 范围 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10364444/