jQuery UI Slider - 禁用单击滑块轨道 [英] jQuery UI Slider - Disable click on slider track
问题描述
我正试图找到一种方法来禁用我的jQuery UI Slider轨道上的点击。单击句柄即可,但如果用户点击该轨道,我不希望句柄响应。
I'm trying to find a way to disable the click on my jQuery UI Slider's track. Clicking on the handle is ok but I do not want the handle to respond if the user clicks on the track.
在document.ready()中设置滑块,如下所示:
slider set up in document.ready() as follows:
$('#navScroller').slider({
value: 0,
start: onNavScrollStart,
slide: onNavScrollSlide,
animate: slideSpeed,
max: slideWidth
});
我试过了两个:
$('#navScroller').unbind('click');
和
$('#navScroller .ui-slider').unbind('click');
这两项都没有阻止滑块响应曲目点击。
neither of which worked to stop the slider from responding to track clicks.
关于如何实现这一目标的任何想法?谢谢!
Any ideas on how to accomplish this? Thanks!
编辑:
我刚刚发现使用:
I just discovered that using:
$('#navScroller').unbind('mousedown');
从整个滑块,手柄和所有内容中删除点击,这更接近我的需要,但我仍然需要能够拖动手柄。
removes clicks from the whole slider, handle and all, which is closer to what i need but I still need to be able to drag the handle.
推荐答案
这应该照顾它。
/**
* Turns off the track click for the given slider control
*/
function disableSliderTrack($slider){
$slider.bind("mousedown", function(event){
return isTouchInSliderHandle($(this), event);
});
$slider.bind("touchstart", function(event){
return isTouchInSliderHandle($(this), event.originalEvent.touches[0]);
});
}
function isTouchInSliderHandle($slider, coords){
var x = coords.pageX;
var y = coords.pageY;
var $handle = $slider.find(".ui-slider-handle");
var left = $handle.offset().left;
var right = (left + $handle.outerWidth());
var top = $handle.offset().top;
var bottom = (top + $handle.outerHeight());
return (x >= left && x <= right && y >= top && y <= bottom);
}
disableSliderTrack($(".ui-slider"));
这篇关于jQuery UI Slider - 禁用单击滑块轨道的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!