Wie deaktiviert man den Schieberegler in bootstrap-slider.js?

Question

gibt es eine Lösung, um das Ziehen zu stoppen, wenn Sie auf button klicken.

die Dokumentation geben Sie nicht die richtige Beschreibung

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

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

}); 

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

Answer 1

den Slider Plugin Extend ein mit aktivieren und deaktivieren Funktion wie:

<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

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

Beispiel javascript:

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

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

Answer 2

Sie müssen die MouseEnter-/mouseleave Ereignisse binden, zum Anzeigen/Ausblenden der 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

Haben Sie einfach eine benutzerdefinierte CSS-Klasse auf dem Schieberegler-Container, der die Mausereignisse mit Zeiger-Ereignissen steuert. Dann ist es nur hinzufügen oder entfernen Sie es in Ihrem Javascript-Code.

CSS aussehen würde so etwas wie diese

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

Die Sie auf Hinzufügen/Entfernen die Klasse auf dem Schieber Containerelement arbeiten. Es ist besonders schön mit Winkel in dem den Code einfach so etwas wie diese:

<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

Die Funktionalität Schieberegler zu deaktivieren ist, indem das data-slider-enabled Attribut true oder false implementiert.

So können Sie einen deaktivierten Schieber wie folgt implementieren:

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

Oder einen aktivierten Schieber wie folgt aus:

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

Sie können auch aktivieren und Ihre Schiebern wie dies mit jQuery deaktivieren:

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

Oder wie folgt mit reinem JavaScript:

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

Für Ihre Implementierung müssen Sie dies tun:

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