risposta

13

Estendere il plugin slider con un abilitare e disabilitare la funzione di come:

<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

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

esempio javascript:

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

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

Grazie per la risposta esauriente. Merita sicuramente più voti! Tuttavia, mi sono reso conto che non era compatibile con il suggerimento: una volta che il cursore è disabilitato, il tooltip è sparito per sempre.Questo perché gli eventi mouseenter e mouseleave non vengono più gestiti. Sono stato in grado di risolvere il problema, niente di speciale. Ho pensato che potresti voler aggiornare la tua risposta per tenere conto di questo punto. –

+0

Come l'hai risolto? – DeadlyChambers

+1

FYI Questo è ora integrato! –

1

hai bisogno di impegnare i/eventi MouseLeave MouseEnter per mostrare/nascondere la 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) 
     }); 
    } 
} 
+0

Sto provando a utilizzare il metodo precedente per visualizzare la descrizione dei comandi per i dispositivi touch su "touchend" sull'impugnatura. Il problema che sto affrontando è, quando chiamo questo metodo come: --- $ ('# slide'). Slider ('enable'); ---- Sembra che sia stata creata un'altra istanza di slider. C'è un altro modo per chiamare questo metodo nell'ambito? – user1241091

1

Basta avere una classe css personalizzata sul contenitore del cursore che controlla gli eventi del mouse con gli eventi del puntatore. Quindi si tratta solo di aggiungerlo o rimuoverlo nel codice javascript.

CSS sarebbe simile a qualcosa di simile

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

L'devi solo lavorare su come aggiungere/rimuovere la classe sul elemento contenitore cursore. E 'particolarmente bello, con angolare in cui il codice è semplicemente qualcosa di simile:

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

La funzionalità per disabilitare i cursori è stato implementato impostando l'attributo data-slider-enabled a true o false.

in modo da poter implementare un cursore disabile come questo:

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

O un cursore abilitato come questo:

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

È inoltre possibile abilitare e disabilitare i cursori come questo con jQuery:

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

O in questo modo con puro JavaScript:

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

Per l'implementazione si avrebbe bisogno di fare questo:

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