jak wyłączyć suwak w pliku bootstrap-slider.js?

Question

jest jakieś rozwiązanie, aby zatrzymać przeciąganie po kliknięciu na button.

dokumentacja nie dają dobrego opisu

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

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

}); 

Demohttp://jsfiddle.net/sweetmaanu/npGw2/

Answer 1

Extend wtyczki suwak z funkcją włączania i wyłączania jak:

<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

Przykład 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> 

przykład javascript:

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

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

Answer 2

Trzeba powiązać mouseenter/wydarzenia mouseLeave aby pokazać/ukryć podpowiedź:

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

Po prostu spróbuj niestandardowej klasy css w kontenerze suwaków, który kontroluje zdarzenia myszy za pomocą zdarzeń wskaźnikowych. Potem chodzi tylko o dodanie lub usunięcie go w kodzie javascript.

CSS będzie wyglądać coś takiego

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

The masz tylko do pracy na dodawanie/usuwanie klasę na elemencie pojemnika suwak. Jest to szczególnie miłe z kanciasty gdzie Twój kod jest po prostu coś takiego:

<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

Funkcjonalność wyłączyć suwaki został wdrożony przez ustawienie atrybutu data-slider-enabled do true lub false.

Więc można wdrożyć niepełnosprawnego suwak tak:

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

albo włączona suwak tak:

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

Można również włączyć i wyłączyć swoje suwaki tak z jQuery:

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

Lubisz to z czystym JavaScript:

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

Dla realizacji trzeba by to zrobić:

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