twitter-bootstrap 如何在 bootstrap-slider.js 中禁用滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19027749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to disable slider in bootstrap-slider.js?
提问by Mo.
is there any solution to stop dragging when click on the button.
是否有任何解决方案可以在单击button.
the documentation do not give proper description
文档没有给出正确的描述
http://www.eyecon.ro/bootstrap-slider/
http://www.eyecon.ro/bootstrap-slider/
$("#stopDrag").click(function(){
});
回答by Bass Jobsen
Extend the slider plugin with a enable and disable function like:
使用启用和禁用功能扩展滑块插件，例如：
<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>
Demo: http://bootply.com/83445
Example html:
示例 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>
example javascript:
示例javascript：
$('#slide').slider();
$('#enable').click(function(){ $('#slide').slider('enable') });
$('#disable').click(function(){ $('#slide').slider('disable') });
回答by Barry Michael Doyle
The functionality to disable sliders has been implemented by setting the data-slider-enabledattribute to trueor false.
禁用滑块的功能已通过将data-slider-enabled属性设置为true或 来实现false。
So you can implement a disabled slider like this:
所以你可以像这样实现一个禁用的滑块：
<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"/>
Or an enabled slider like this:
或者像这样启用的滑块：
<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"/>
You can also enable and disable your sliders like this with jQuery:
您还可以像这样使用 jQuery 启用和禁用滑块：
$("#slide").slider();
$("#slide").slider("enable");
$("#slide").slider("disable");
Or like this with pure JavaScript:
或者像这样使用纯 JavaScript：
var slide = new Slider("#slide");
slide.enable();
slide.disable();
For your implementation you would need to do this:
对于您的实施，您需要这样做：
$("#stopDrag").click(function(){
$("#slide").slider("disable");
});
回答by RedKen
You need to bind the mouseenter / mouseleave events to show/hide the tooltip:
您需要绑定 mouseenter / mouseleave 事件来显示/隐藏工具提示：
$.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),
mouseenter: $.proxy(this.showTooltip, this),
mouseleave: $.proxy(this.hideTooltip, this)
});
} else {
this.picker.on({
mousedown: $.proxy(this.mousedown, this),
mouseenter: $.proxy(this.showTooltip, this),
mouseleave: $.proxy(this.hideTooltip, this)
});
}
}
回答by MisterM71
Simply have a custom css class on the slider container which controls the mouse events with pointer-events. Then it is just about adding or removing it in your javascript code.
只需在滑块容器上设置一个自定义 css 类，它就可以使用指针事件控制鼠标事件。然后就是在您的 javascript 代码中添加或删除它。
CSS would look like something like this
CSS 看起来像这样
#container {
pointer-events:auto;
}
#container.slider-unavailable {
pointer-events:none;
}
The you only have to work on adding/removing the class on the slider container element. It is particularly nice with angular where your code is simply something like this:
您只需要在滑块容器元素上添加/删除类。angular 特别好，你的代码是这样的：
<div class="container" ng-class="{'class1 class2 class3':true, 'slider-unavailable':sliderIsUnavailable}">
<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"><br>
<label>Slider is unavailable:
<input type="checkbox" ng-model="sliderIsUnavailable">
</label><br>
</div>
