Question

我有一个jQuery UI Slider，我想在用户尝试使用轨道滑动时禁用它。只有当有人在某处拖动手柄时，它才能工作/启用。单击并尝试拖动滑动以移动手柄应该被禁用。我不确定是否可以使用unbind或mousedown事件来完成此操作。

我注意到的问题是，我的句柄从1到100.当你移动句柄的开头时，它显示使用ui.value。但是，如果您尝试移出手柄并滑动滑块轨道，ui.value将重置其值。

所以，我想禁用非句柄拖动。

Answer 1

  $("#range-amount").slider({ disabled: true });

Answer 2

这可以使用2行css代码完成！

这是HTML

<div class="SliderContainer"><div id="BGS0"></div></div>

这是JS

$('#BGS0').slider();

这是CSS

.SliderContainer {
   pointer-events: none;
   /* Other settings here */
}

.SliderContainer > .ui-slider .ui-slider-handle {
pointer-events: auto;
/* Other settings here */
}

注意：我使用SliderContainer Class作为父DIV，因为默认情况下在此DIV中禁用任何指针事件。然后我只为滑块手柄启用了指针事件。父DIV中的滑块仅受此选项的影响，因为我使用了.SliderContainer > .ui-slider .ui-slider-handle选择器。

Answer 3

我也有同样的问题，除非我决定从jquery ui本身删除句柄，否则我找不到任何解决方案

在ui.slider.js中，注释这一行。

// Bind the click to the slider itself
this.element.bind('mousedown.slider', function(e) {
   self.click.apply(self, [e]);
   self.currentHandle.data("mouse").trigger(e);
   self.firstValue = self.firstValue + 1; //This is for always triggering the change event
});

Answer 4

我已经使用这个解决方案完成了它：

jQuery UI Slider - Disable click on slider track

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"));

Answer 5

如果我清楚你的问题，你不希望滑块在鼠标事件上滑动，这应该有效：

$( "#slider" ).mousedown(function(){return false;}); // For mousedown
$( "#slider" ).scroll(function(){return false;}); // For scrolling with the trackpad

同时检查jquery事件列表，只需替换任何事件即可从滑块中删除此事件，例如：

$( "#slider" ).someEvent(function(){return false;});

要从滑块中删除所有事件，请尝试：

$('#slider').unbind();

jQuery UI Slider - 禁用在轨道上滑动/启用句柄mousedown

5 个答案: