[英]how to disable slider in bootstrap-slider.js?
是否有任何解決方案,以便在單擊button
時停止拖動。
文檔沒有給出正確的描述
http://www.eyecon.ro/bootstrap-slider/
$("#stopDrag").click(function(){
});
使用啟用和禁用功能擴展滑塊插件,如:
<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') });
通過將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");
});
您需要綁定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)
});
}
}
只需在滑塊容器上有一個自定義css類,它使用指針事件控制鼠標事件。 然后它只是在您的JavaScript代碼中添加或刪除它。
CSS看起來像這樣
#container {
pointer-events:auto;
}
#container.slider-unavailable {
pointer-events:none;
}
您只需要在滑塊容器元素上添加/刪除類。 使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.