jQuery UI Slider -> mousewheel desteği ile?

Question

Zaten jQuery için yeni olduğumu bildiğiniz gibi, bu temaya ait olmayan Kod Geliştirmeleri hala çok izin verilir.

Bu

benim HTML Kod geçerli:

<div style="display: inline-block; width: 120px;"> 
    <div> 
     Bananas: 
     <br /> 
     <input id="bananas_amount" /> 
     <input id="bananas_amount_percent" /> 
    </div> 
    <br /> 
    <div id="bananas" style="height:200px;"></div> 
</div> 

Ve bu benim korkunç js-kodudur:

$("#bananas").slider({ 
    orientation: "vertical", 
    range: "min", 
    min: 0, 
    max: 100, 
    value: 20, 
    step: 5, 
    slide: function(event, ui) { 
     $("#bananas_amount_percent").val(ui.value + " %"); 

      // the code displays a percentage by standart, but I need the real value, too: 
      var bananas_amount_percent = $("#bananas_amount_percent").val(); 
      var bananas_amount_percent = bananas_amount_percent.replace(" %", ""); 
      var bananas_amount = Math.round((weight/100) * bananas_amount_percent); 
      $("#bananas_amount").val(bananas_amount + " g"); 
    } 
}); 
$("#bananas_amount_percent").val($("#bananas").slider("value") + " %"); 

// again the real value (else the value would not be updatet on reload-reset) 
var bananas_amount_percent = $("#bananas_amount_percent").val(); 
var bananas_amount_percent = bananas_amount_percent.replace(" %", ""); 
var bananas_amount = Math.round((weight/100) * bananas_amount_percent); 
$("#bananas_amount").val(bananas_amount + " g"); 

(ağırlık 200) biri hariç Ancak

, o çalışıyor "küçük" detay: mousewheel ile değil! Zaten bu uzantıya gerektiğini öğrendim: https://github.com/brandonaaron/jquery-mousewheel/downloads

Ama gerçekten benim Kaydırıcısının bu nasıl uygulanacağı kesinlikle hiçbir fikri ettik (Btw benim Sitede 5 ettik).

Yardım pls, Thx! içinde (

DivName muhtemelen kaydırıcı ve ben olmak ile

$("#DivName").mousewheel(function(event, delta) { 
    //Trigger slide event 


     //Prevent the default mouse wheel 
     event.preventDefault(); 

}); 

Delta inanıyoruz kaydırma yönü ise:

Answer 1

Mousewheel eklentisi, rolü için çok ağırdır. Özü çıkardım. Tüm tarayıcılarda harika çalışır.

$('#bananas').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = 0, element = $(this), value, result, oe; 
    oe = e.originalEvent; // for jQuery >=1.7 
    value = element.slider('value'); 

    if (oe.wheelDelta) { 
     delta = -oe.wheelDelta; 
    } 
    if (oe.detail) { 
     delta = oe.detail * 40; 
    } 

    value -= delta/8; 
    if (value > 100) { 
     value = 100; 
    } 
    if (value < 0) { 
     value = 0; 
    } 

    result = element.slider('option', 'slide').call(element, e, { value: value }); 
    if (result !== false) { 
     element.slider('value', value); 
    } 
    return false; 
}); 

DÜZENLEME: #bananas

EDIT2 için #slider değiştirdi: Eğer ben sadece bu özelliğiyle parametre nesnesi için geçmesi sadece value özelliği kullanılarak Çünkü slide olayı

tetikleme ekledi. Daha fazla bir şeye ihtiyacınız varsa, bunu fare çark koduna eklemeyi unutmayın.

EDIT3: slide işlev false döndüğünde (sadece belgelerinde gibi) yeteneği iptal değişikliği eklendi

GÜNCELLEME: delta tekerlek yönünü ortaya koymakla kalmayıp, aynı zamanda daha derin bir anlamı vardır. Kaydırılacak piksel sayısını açıklar. Kaydırmak için varsayılan ayar 120 piksel olan 3 satırdır, ancak farklılık gösterebilir. Eğer tekerleğin sadece yönünü almak istiyorsanız
, bu değiştirin: Buna

value -= delta/8; 

:

value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0; 

delta === 0 rağmen hiçbir zaman ortaya.

GÜNCELLEME: jQuery'nin (e.originalEvent) daha yeni sürümleri için bölüm eklendi.

Answer 2

Daha önce Fare tekerleğinin eklentisi kullanılır ama böyle kullanılması gerektiğini gördüğüm kadarıyla değil üniteler) Yani negatif, yukarı doğru pozitif tahmin ediyorum.