jQuery UI滑塊 - 禁用滑動軌道/啓用句柄mousedown

我有一個jQuery UI滑塊，當用戶嘗試使用軌道滑動時，我想禁用它。只有當某人在某處拖動句柄時，它才能工作/啓用。點擊並試圖拖動滑動來移動手柄應該被禁用。我不確定這是否可以使用unbind或mousedown事件來完成。jQuery UI滑塊 - 禁用滑動軌道/啓用句柄mousedown

我注意到的問題是，我的手柄從1移動到100.當您移動手柄的開始時，它將顯示使用ui.value。但是，如果您試圖超出手柄並滑動滑塊軌道，則ui.value將重置其值。

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

來源

2012-04-10 user1324638

你能告訴我們在這裏的演示http://jsfiddle.net/，以便我們可以理解，因爲我有點困惑與你的問題。 – coder 2012-04-10 17:10:22

-1

如果我對你的問題清楚，你不想滑塊上的鼠標事件滑動，這應該工作：

$("#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();

來源

2012-04-10 17:11:10

謝謝...這就是我想要做的。但滑塊只能在使用滑塊手柄時移動/啓用。手柄外的任何東西都應該禁用。 – user1324638 2012-04-10 17:21:18

好，你所要做的就是從滑塊中移除所有事件，並且只處理滑塊句柄上的事件:)，我已經更新了答案以顯示此內容 – 2012-04-10 17:24:11

我也有同樣的問題，我找不到任何解決方案，除非我決定從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 
});

來源

2012-08-13 08:46:21

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

來源

2013-07-06 08:58:59 sohaib

我使用此解決方案做到了：

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

來源

2013-07-08 13:06:33 Maurix

這是可以做到期運用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類作爲父DIV，因爲任何指針事件在默認情況下在此DIV內禁用。然後我只爲滑塊句柄啓用指針事件。父DIV內部的滑塊受此選項影響，因爲我使用了.SliderContainer > .ui-slider .ui-slider-handle選擇器。

來源

2015-04-25 09:33:17 mirushaki

jQuery UI滑塊 - 禁用滑動軌道/啓用句柄mousedown

回答

相關問題