jQuery UI Slider - >鼠标滚轮支持？

Question

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

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

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

帮帮忙,谢谢!

Answer 1

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

$('#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(就像在文档中一样)

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

value -= delta / 8;

对此:

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

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

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