Suwak jQuery UI - wyłącza klikanie suwaka

Question

Próbuję znaleźć sposób, aby wyłączyć kliknięcie na mojej ścieżce Slider UI jQuery. Kliknięcie na uchwyt jest w porządku, ale nie chcę, aby uchwyt reagował, gdy użytkownik kliknie ścieżkę.

suwak ustawić w document.ready() w następujący sposób:

$('#navScroller').slider({ 
     value: 0, 
     start: onNavScrollStart, 
     slide: onNavScrollSlide, 
     animate: slideSpeed, 
     max: slideWidth 
}); 

Próbowałem zarówno:

$('#navScroller').unbind('click'); 

i

$('#navScroller .ui-slider').unbind('click'); 

z których żaden nie pracował, aby zatrzymać suwak od reagowania na kliknięcia śladów.

Jakieś pomysły, jak to osiągnąć? Dzięki!

EDIT: Właśnie odkryłem, że za pomocą:

$('#navScroller').unbind('mousedown'); 

usuwa kliknięcia z całego suwaka, uchwyt i wszystko, co jest bliżej do tego, co trzeba, ale nadal muszę być w stanie przeciągnij uchwyt.

Answer 1

Należy dbać o to.

/** 
* Turns off the track click for the given slider control 
*/ 

function disableSliderTrack($slider){ 

    $slider.bind("mousedown", function(event){ 

     return isTouchInSliderHandle($(this), event); 

    }); 

    $slider.bind("touchstart", function(event){ 

     return isTouchInSliderHandle($(this), event.originalEvent.touches[0]); 

    }); 
} 

function isTouchInSliderHandle($slider, coords){ 

    var x = coords.pageX; 
    var y = coords.pageY; 

    var $handle = $slider.find(".ui-slider-handle"); 

    var left = $handle.offset().left; 
    var right = (left + $handle.outerWidth()); 
    var top = $handle.offset().top; 
    var bottom = (top + $handle.outerHeight()); 

    return (x >= left && x <= right && y >= top && y <= bottom);  
} 


    disableSliderTrack($(".ui-slider")); 

Answer 2

Jak JQuery już związany swój pojemnik (suwak) div z myszy w dół zdarzenia, więc nawet jeśli rozpiąć swój zakres div od niego, będzie ona nadal ognia na div kontenera,

oto rozwiązanie:

$('#navScroller .ui-slider-range').mousedown(function() { 
     return false; 
}); 

Pozdrawiam,

Answer 3

miałem również ten sam problem i nie mogłem znaleźć żadnego rozwiązania, chyba że zdecydował się zdjąć uchwyt z jquery ui samego

In ui.slider.js, Skomentuj te linie. // Bind kliknięcie suwaka sama

this.element.bind('mousedown.slider', function(e) { 
    self.click.apply(self, [e]); 
    self.currentHandle.data("mouse").trigger(e); 
    self.firstValue = self.firstValue + 1; //This is for always triggering the change event 
}); 

Answer 4

@btate ma prawo pomysł (porzucenie mousedown/touchstart, które nie pochodzą z uchwytu suwaka), ale jest łatwiejszy sposób, aby się tam dostać. Obiekt zdarzenia jQuery powie Ci, który element zainicjował zdarzenie.

var sliderMouseDown = function (e) { // disable clicks on track 
    var sliderHandle = $('#navScroller').find('.ui-slider-handle'); 
    if (e.target != sliderHandle[0]) { 
     e.stopImmediatePropagation(); 
    } 
}; 

$('#navScroller') 
    .on('mousedown', sliderMouseDown) 
    .on('touchstart', sliderMouseDown) 
    .slider({ 
      value: 0, 
      start: onNavScrollStart, 
      slide: onNavScrollSlide, 
      animate: slideSpeed, 
      max: slideWidth 
    }); 

Answer 5

wiem, że to już stary i odpowiedział, ale non-javascript rozwiązanie wymyśliłem było umieścić suwak w opakowaniu, styl opakowanie wyglądać jak chciałem utwór wyglądać i ustawić wysokość suwaka do 0.

Konieczne jest pewne wyrównanie marginesów, aby wszystko było wyrównane, ale było to dość łatwe i działało idealnie.

<div class="slide-wrap"> 
    <div class="slider"></div> 
</div> 

.slide-wrap { 
    width: 300px; 
    height: 15px; 
    border: solid 1px #666; 
    margin-top: 10px; 
} 

.slider { 
    width: 100%; 
    height: 0; 
    border: none; 
    overflow: visible; 
} 

.slider .ui-slider-handle { 
    margin: 2px 0 0; 
} 

http://jsfiddle.net/83Hwf/1/

Answer 6

$("#slider").slider({ disabled: true }); 

Answer 7

He, ponad 2 lata, ale tutaj jest moje rozwiązanie:

$('a.ui-slider-handle').on('click',function(e){ 
    e.stopImmediatePropagation(); 
    return false; 
}); 

Answer 8

Working fiddle.

var sliding = false; 

var slide = function (ev, ui) { 

    if (ev.originalEvent.type !== 'mousemove') { 
     sliding = false; 
     return false; 
    } 

    sliding = true; 

    console.log("I'm sliding."); 

}; 

var start = function (ev, ui) { 

    if (!sliding) { 
     console.log("I'm not sliding."); 
    } 

}; 

var stop = function (ev, ui) { 

    sliding ? console.log('I slid.') : console.log('I clicked.'); 

    sliding = false; 

}; 

$('#slider').slider({ 
    slide: slide, 
    start: start, 
    stop: stop, 
}); 

Answer 9

Jest non-JS rozwiązanie do tego również, przy użyciu tylko dwóch linijek CSS:

/* Supress pointer events */ 
#navSlider { pointer-events: none; } 
/* Enable pointer events for slider handle only */ 
#navSlider .ui-slider-handle { pointer-events: auto; } 

Answer 10

Ten wystarczyły dla mnie (tylko upewnij się, aby odłączyć Lister zdarzeń dokument podczas niszczenia obiektu suwak)

  <!doctype html> 
      <html lang="en"> 
      <head> 
       <meta charset="utf-8"> 
       <title>jQuery UI Slider - Default functionality</title> 
       <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
       <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
       <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

       <style> 
       .slider.ui-slider-disabled { 
        opacity: 1; 
       } 
       </style> 

       <script> 

       $(function() { 

       $(".slider").slider({ 
        range: true, 

        create: function(event, ui) { 

         var disabled = true; 
         $(".slider").slider("disable"); 

         $('.ui-slider-handle').on('mousedown', function(event) { 
          disabled = false; 
          $(".slider").slider("enable"); 
         }); 

         $(document).on('mouseup', function(event) { 
          if (!disabled) { 
          $(".slider").slider("disable"); 
          disabled = true; 
          } 
         }); 
        } 
       }); 

       }); 

       </script> 



      </head> 
      <body> 
      <div class="slider"></div> 

      </body> 
      </html> 

Answer 11

Spróbuj tego:

$("#slider").slider({ disabled: true }); 

Answer 12

Spędziwszy chwilę szukając rozwiązania lub czegoś, co pomogłoby mi zbliżyć się do tego, co było po, wymyśliłem następujące, które wydaje się działać we wszystkich przeglądarkach:

var _sliderEvents = [];  

    $('.slider').each(function (i) { 
     var _slider = $(this); 
     _sliderEvents.push($._data(_slider[0]).events.mousedown); 
     $._data(_slider[0]).events.mousedown = {}; 
     _slider.on({ 
      mouseenter: function() { 
       $._data(_slider[0]).events.mousedown = _sliderEvents[i]; 
      }, 
      mouseleave: function() { 
       $._data(_slider[0]).events.mousedown = {}; 
      } 
     }, '.ui-slider-handle'); 
    }); 

http://jsfiddle.net/digits/fxef8398/ zapraszamy :)

Answer 13

Wystarczy dodać zachowanie: brak

 
noUiSlider.create(monday_shift_time_slider, { 
    behaviour: "none" 
});