cách tắt thanh trượt trong bootstrap-slider.js?

Question

là có giải pháp nào để dừng kéo khi nhấp vào button.

tài liệu không đưa ra mô tả thích hợp

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

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

}); 

DEMOhttp://jsfiddle.net/sweetmaanu/npGw2/

Answer 1

Mở rộng các plugin trượt với một kích hoạt và vô hiệu hóa chức năng như:

<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

Ví dụ 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> 

dụ javascript:

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

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

Answer 2

Bạn cần phải ràng buộc mouseenter/sự kiện MouseLeave để hiển thị/ẩn các tooltip:

$.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) 
     }); 
    } 
} 

Answer 3

Đơn giản chỉ cần có một lớp css tùy chỉnh trên vùng chứa thanh trượt điều khiển các sự kiện chuột với các sự kiện con trỏ. Sau đó, nó chỉ là thêm hoặc loại bỏ nó trong mã javascript của bạn.

CSS sẽ trông giống như một cái gì đó như thế này

#container { 
    pointer-events:auto; 
} 
#container.slider-unavailable { 
    pointer-events:none; 
} 

Các bạn chỉ phải làm việc trên thêm/gỡ bỏ các lớp trên yếu tố container trượt. Nó đặc biệt tốt đẹp với góc nơi mã của bạn chỉ đơn giản là một cái gì đó như thế này:

<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> 

Answer 4

Chức năng để vô hiệu hóa thanh trượt đã được thực hiện bằng cách thiết lập thuộc tính data-slider-enabled để true hoặc false.

Vì vậy, bạn có thể thực hiện một thanh trượt tàn tật như thế này:

<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"/> 

Hoặc một thanh trượt cho phép như thế này:

<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"/> 

Bạn cũng có thể bật và tắt thanh trượt của bạn như thế này với jQuery:

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

Hoặc như thế này với JavaScript thuần túy:

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

Đối với thực hiện của bạn, bạn sẽ cần phải làm điều này:

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