jQuery UI Slider - >有鼠标滚轮支持？ [英] jQuery UI Slider -> with mousewheel support?

问题描述

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

as you may already know I'm new to jQuery, so Code-Improvements not belonging to this theme are still very allowed.

这是我的HTML代码：

This is my HTML-Code:

<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代码：

And this is my horrifying js-code:

$( "#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 /下载

However, it's working, except one "little" detail: not with the mousewheel! I already found out that I need this extension: https://github.com/brandonaaron/jquery-mousewheel/downloads

但我真的完全不知道如何将这个实现到我的Slider（我在我的网站上有5个顺便说一句）。

But I've really absolutely no idea how to implement this to my Slider (I've 5 on my Site btw).

帮助pls，
Thx！

Help pls, Thx!

推荐答案

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

The mousewheel plugin is too heavy for its role. I extracted the essence. Works great in all browsers.

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

added triggering slide event

因为你只使用 value 属性，所以我只传递参数对象，只有这个属性。如果您还需要更多内容，请记住将它添加到鼠标滚轮代码中。

Because you are using only value property I pass for parameter object with only this property. If you will need something more, remember to add it to the mousewheel code.

EDIT3：当幻灯片函数返回 false （就像在文档中一样）

added change cancelling ability when slide function returns false (just like in the documentation)

更新： delta 不仅显示车轮方向，还具有更深层的含义。它描述了要滚动的像素数。滚动的默认设置是3行，即120像素，但它可以不同。

如果您只想检索方向盘，请更改：

UPDATE: delta shows not only the wheel direction, but also has a deeper meaning. It describes number of pixels to scroll. The default setting for scrolling is 3 lines which is 120 pixels, but it can differ.
If you want to retrieve only direction of wheel, change this:

value -= delta / 8;

到此：

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

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

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

UPDATE: Added part for newer versions of jQuery (e.originalEvent).

这篇关于jQuery UI Slider - >有鼠标滚轮支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！