Поддержка колесика мыши для выбора даты в пользовательском интерфейсе jQuery

#jquery-ui #mousewheel #jquery-ui-datepicker

#jquery-пользовательский интерфейс #колесо мыши #jquery-ui-datepicker

Вопрос:

Есть ли где-нибудь дополнение, которое добавляет поддержку колесика мыши в jQuery UI datepicker? (Таким образом, использование колеса мыши над календарем приводит к перемещению месяца вперед / назад.)

Список изменений, похоже, указывает, что поддержка колесика мыши была добавлена в 1.7, но похоже, что этот набор изменений на самом деле не имел ничего общего с механизмом выбора даты. Беглый поиск в версии 1.8 показывает, что встроенной поддержки колесика мыши нет.

Я знаю, что datepicker от Кита Вуда поддерживает колесо мыши, но я использую этот timepicker, который зависит от datepicker в пользовательском интерфейсе jQuery.

Ответ №1:

Это можно легко добавить, добавив следующий код в вашу готовую функцию. Он использует расширение jQuery mousewheel и добавляет прослушиватель событий в реальном времени для событий mousewheel в jQuery UI datepicker divs. Если таковое обнаружено, это запускает click событие на кнопке предыдущий / следующий месяц.

Живая демонстрация: http://jsfiddle.net/PSFgY /

 $('.ui-datepicker').live("mousewheel", function(event, delta){
    if(delta < 0){
        $(this).find('.ui-datepicker-next').click();
    } else {
        $(this).find('.ui-datepicker-prev').click();
    }
    event.preventDefault();
    event.stopPropagation();
});

1. Именно то, что мне было нужно; спасибо! Я изменил класс на .ui-datepicker-group (и добавил $(this).parent().find …), чтобы колесо не запускалось при превышении части выпадающего списка с выбором времени.

2. Я думаю, delta теперь event.wheelDelta

Ответ №2:

Небольшое обновление: начиная с jQuery 1.7, метод .live() устарел. Используйте .on() для подключения обработчиков событий. Также мне пришлось использовать event.originalEvent.wheelDelta для получения дельты.

 $(document).on('mousewheel', '.ui-datepicker', function (event) {
    var sel = event.originalEvent.wheelDelta < 0 ? '.ui-datepicker-next' : '.ui-datepicker-prev';
    $(this).find(sel).click();
    event.preventDefault();
    event.stopPropagation();
});

Ответ №3:

Вот еще один способ справиться с проблемой, особенно когда установлены минимальные и максимальные даты:

 $('.ui-datepicker').bind("mousewheel", function(e){
    var delta = e.originalEvent.wheelDelta;
    if(delta <  0){
        $(this).find('.ui-datepicker-next').click();
    } else {
        $(this).find('.ui-datepicker-prev').click();
    }
    e.preventDefault();
});