jQuery UI滑塊 - >鼠標滾輪支持？

，你可能已經知道我是新來的jQuery，所以代碼的改進不屬於這個主題仍然很允許的。jQuery UI滑塊 - >鼠標滾輪支持？

這是我的HTML代碼：

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

這是我怕怕的js代碼：

$("#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");

（重量爲200）

但是，它的工作，除了一個「小」細節：不與鼠標輪！我已經發現我需要這個擴展：https://github.com/brandonaaron/jquery-mousewheel/downloads

但我真的完全不知道如何實現這個我的滑塊（我有5我的網站btw）。

幫助PLS， THX！

來源

2011-04-19 iceteea

只是一個想法，使用更短的變量和類的名稱，使代碼更易讀。 ;） – DarthJDG 2011-04-19 21:32:27

變量名稱本身非常重要，所以它們必須儘可能地表達。但你仍然可以正確地將它們張貼在這裏。我可以編輯他們，謝謝！ – iceteea 2011-04-19 21:34:36

我認爲你在一篇文章中說過「這是我可怕的js代碼：」 – 2011-04-19 21:36:26

鼠標滾輪插件是它的作用太重。我提取了精華。在所有瀏覽器中都很好用。

$('#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; 
});

編輯：改變#slider到#bananas

EDIT2：添加觸發slide事件

由於只使用value財產我傳遞參數對象是否只此屬性。如果您需要更多，請記住將其添加到鼠標滾輪代碼中。

EDIT3：加入變化消除能力時slide函數返回false（就像在文檔中）

UPDATE：delta不僅顯示輪的方向，而且還具有更深的含義。它描述了要滾動的像素數量。滾動的默認設置是3行，即120像素，但可以不同。
如果要檢索輪的唯一的方向，改變這種：

value -= delta/8;

這樣：

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

雖然delta === 0應該永遠不會發生。

更新：增加了更新版本的jQuery（e.originalEvent）的一部分。

來源

2011-04-19 22:06:12 pepkin88

非常感謝！它的工作原理！我有點惱怒的三角洲變量（* 40/8？），當我滾動增加值30，如何改變這個5？ – iceteea 2011-04-20 07:53:47

@iceteea：我更新了答案。 – pepkin88 2011-04-20 14:18:03

我沒有用之前的鼠標滾輪插件，但是從我已經看到了它應該像這樣使用：

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


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

});

隨着DivName可能是你的滑塊，我相信三角洲是滾動方向（在單位）所以我會猜測消極是上漲，積極下跌。

來源

2011-04-19 21:44:02 Henry

jQuery UI滑塊 - >鼠標滾輪支持？

回答

相關問題