javascript – jQuery UI Slider – >鼠标滚轮支持？

你可能已经知道我是jQuery的新手,所以仍然非常允许不属于这个主题的代码改进.

这是我的HTML代码：

display: inline-block; width: 120px;">
    

这是我可怕的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

但我真的完全不知道如何将这个实现到我的Slider(我的网站上的5个btw).

帮帮忙,
谢谢！

最佳答案

鼠标滚轮插件太重了它的作用.我提取了精华.适用于所有浏览器.

$('#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：添加了触发幻灯片事件

因为您只使用value属性,所以我只传递参数对象,只有这个属性.如果您还需要更多功能,请记住将其添加到鼠标滚轮代码中.

EDIT3：当幻灯片功能返回false时添加了更改取消功能(就像在文档中一样)

更新：delta不仅显示车轮方向,还具有更深的含义.它描述了要滚动的像素数.滚动的默认设置是3行,即120像素,但它可以不同.
如果您只想检索车轮方向,请更改：

value -= delta / 8;

对此：

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

虽然delta === 0应该永远不会发生.

更新：为更新版本的jQuery(e.originalEvent)添加了部分.