如何在bootstrap-slider.js中禁用滑块？

Question

有什么解决方案可以在点击时停止拖动button.

文档没有给出正确的描述

http://www.eyecon.ro/bootstrap-slider/

$("#stopDrag").click(function(){

});

演示 http://jsfiddle.net/sweetmaanu/npGw2/

Answer 1

使用启用和禁用功能扩展滑块插件,如:

<script src="/slider/js/bootstrap-slider.js"></script>
<script>
$.fn.slider.Constructor.prototype.disable = function () {
    this.picker.off();
}
$.fn.slider.Constructor.prototype.enable = function () {
    if (this.touchCapable) {
        // Touch: Bind touch events:
        this.picker.on({
            touchstart: $.proxy(this.mousedown, this)
        });
    } else {
        this.picker.on({
            mousedown: $.proxy(this.mousedown, this)
        });
    }
}
</script>

演示:http://bootply.com/83445

示例html:

<div class="container" style="background-color:darkblue;">
<br>
<input id="slide" type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after">

<button id="enable">Enable</button>
<button id="disable">Disable</button>
</div>

示例javascript:

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

$('#enable').click(function(){ $('#slide').slider('enable') });
$('#disable').click(function(){ $('#slide').slider('disable') });

Answer 2

通过将data-slider-enabled属性设置为true或来实现禁用滑块的功能false.

所以你可以像这样实现一个禁用的滑块:

<input id="slide" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>

或者像这样的启用滑块:

<input id="slide" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="true"/>

您还可以使用jQuery启用和禁用这样的滑块:

$("#slide").slider();
$("#slide").slider("enable");
$("#slide").slider("disable");

或者像纯JavaScript一样:

var slide = new Slider("#slide");
slide.enable();
slide.disable();

对于您的实现,您需要这样做:

$("#stopDrag").click(function(){
    $("#slide").slider("disable");
});