jQuery UI Slider -> с поддержкой колесика мыши? - PullRequest
Новая
       16

jQuery UI Slider -> с поддержкой колесика мыши?

5 голосов
/ 20 апреля 2011

Как вы уже знаете, я новичок в 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

Но я действительно абсолютно не представляю, как реализовать это в моем Слайдере (кстати, у меня на сайте 5).

Помогите, пожалуйста, Thx!

Ответы [ 2 ]

8 голосов
/ 20 апреля 2011

Плагин mousewheel слишком тяжел для своей роли.Я извлек суть.Прекрасно работает во всех браузерах. 

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

РЕДАКТИРОВАТЬ 2: добавлен запуск slide событие

Поскольку вы используете толькоvalue свойство, которое я передаю для объекта параметра только с этим свойством.Если вам понадобится что-то еще, не забудьте добавить его в код колесика мыши.

EDIT3: добавлена ​​возможность отмены изменений, когда функция slide возвращает false (как в документации)

ОБНОВЛЕНИЕ: delta показывает не только направление колеса, но и имеет более глубокое значение.Описывает количество пикселей для прокрутки.Значение по умолчанию для прокрутки составляет 3 строки, что составляет 120 пикселей, но оно может отличаться.
Если вы хотите получить только направление колеса, измените это: 

value -= delta / 8;

на следующее: 

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

, хотя delta === 0 никогда не должно происходить.

ОБНОВЛЕНИЕ: Добавлена ​​часть для более новых версий jQuery (e.originalEvent).

4 голосов
/ 20 апреля 2011

Я раньше не использовал плагин mousewheel, но из того, что я видел, его следует использовать так: 

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


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

});

Поскольку DivName, вероятно, является вашим ползунком, и я полагаю, что Delta - это направление прокрутки (в единицах), поэтому я бы предположил, что отрицательный - это вверх, положительный - вниз.

...