2012-05-25 44 views
9

, bir kaydırıcı entegre edilmiştir. Her şey yolunda gidiyor, Ancak sürgünün tutamaçları, sürüklenirken birbirleriyle çakışıyor. Bunu nasıl önleyebilirim?? jQuery UI 1.7 kullanarak

Burada benim ui sürgüsünü görebilirsiniz

Varsayılan görünüm:

enter image description here

Çakışan görünüm:

enter image description here

cevap

24

Bir slide bir çakışma tespit ederek gerçekleştirebilirsiniz olay işleyicisi ve slaytın oluşmasını önlemek için yanlış döndürme . Örnek: Bu örnekte 20 değeri sadece sapın genişliğine göre kodlanma

$("#slider-range").slider({ 
 
    range: true, 
 
    min: 0, 
 
    max: 500, 
 
    values: [ 75, 300 ], 
 
    slide: function(event, ui) { 
 
     if ((ui.values[ 0 ] + 20) >= ui.values[ 1 ]) { 
 
      return false; 
 
     } 
 
    } 
 
});
body { padding: 50px; }
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> 
 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
<div id="slider-range"></div>
not edin. Kullanım durumunuza göre, bunu mantıklı olana değiştirmek zorundasınız. İlginiz için

+0

teşekkürler. Kaydırıcıyı sürüklerseniz, birbirleriyle çakışırlar. Bu benim sorum. – Hearaman

+0

Yakaladım, bunu gidermek için cevabım güncellendi. –

0
<script> 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
      if ((ui.values[0] + 55) >= ui.values[1]) { 
       return false; 
      } 
     } 
    });​ 
</script>