От автора: в сегодняшнем уроке я хотел бы рассмотреть очень интересный плагин библиотеки jQuery под названием jquery.mousewheel, который позволяет совершать какие-то действия при вращении колесика мыши. Другими словами, он позволяет нам обрабатывать событие вращения колесика мыши по своему усмотрению.
В начале мы с Вами рассмотрим, где взять данный плагин и как с ним работать, а затем при помощи данного плагина научимся управлять виджетом слайдер библиотеки jQuery UI, то есть закрепим полученные знания на практике. Для этого мы с Вами возьмем исходные файлы из предыдущего урока (практическое применение виджета слайдер библиотеки jQuery UI), который мы с Вами проходили ранее.
1. Подготовка к уроку.
Для начала давайте возьмем исходные файлы к уроку — Практическое применение виджета слайдер библиотеки jQuery UI, который мы с Вами проходили ранее. Для тех, кто не смотрел данный урок и не понимает о чем сейчас идет речь, я настоятельно рекомендую посмотреть данный урок. Так как в сегодняшнем уроке я буду использовать некоторые понятия и переменные из прошлого урока.
Далее скопируем исходные файлы в отдельную папку на нашем локальном компьютере. Структура файлов и папок у Вас должна получиться вот такой:
css
images
js
price.html
slider.html
Как Вы помните, в папке js у нас сохранены библиотеки jQuery и jQuery UI. Теперь давайте создадим новый файл под названием scroll.html, с вот таким кодом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <title>Скрипт обработки вращения колеса мыши</title> </head> <body> <div id="scroll" style="margin:100px 0px 0px 100px;border:1px solid grey;width:400px;height:200px"> <!--Блок для обработки события вращения колесика мыши--> </div> <div id="result" style="border:1px solid grey;margin:20px 0px 0px 100px;width:50px;height:30px"> <!--Для просмотра результата вращения колесика мыши--> </div> <!--Создаем несколько блоков <p> что бы в браузере появилась полоса прокрутки--> <p> LINE 1 </p> <p> LINE 2 </p> <p> LINE 3 </p> <p> LINE 4 </p> <p> LINE 5 </p> <p> LINE 6 </p> <p> LINE 7 </p> <p> LINE 8 </p> <p> LINE 9 </p> <p> LINE 10 </p> </body> </html> |
Как Вы видите это обычная html разметка, которая нам потребуется для демонстрации работы плагина jquery.mousewheel. Сперва подключаем библиотеку jQuery которая располагается в паке js. Далее создаем два блока div:
первый с идентификатором scroll – он нам потребуется для того чтобы только в этом блоке обрабатывать событие вращения колесика мыши;
второй с идентификатором result – в этот блока мы будем выводить различные вспомогательные результаты.
Затем создаем несколько абзацев p, для того что бы в браузере появилась полоса прокрутки. Это нам потребуется для тестирования работы плагина. Так как по умолчанию вращение колесика мыши приводит к перемещению полосы прокрутки. Мы это действие с Вами отменим и назначим другое, но об этом позже. А сейчас давайте перейдем в браузер и посмотрим, что у нас получилось:
Как видите, ничего сложного – два обычных блока и несколько строк с текстом для отображения полосы прокрутки.
2. Установка плагина mousewheel.
Скачать плагин mousewheel можно с официального сайта разработчика. Переходим на сайт и кликнем по ссылке Download.
Далее скачиваем последнюю стабильную версию. На момент записи урока – это версия mousewheel 3.0.6.
Затем распаковываем полученный архив. В получившейся папке после распаковки Вы увидите файл jquery.mousewheel.js – это и есть плагин mousewheel.
Далее копируем этот плагин в папку js, где располагаются библиотеки jQuery jQuery UI. И подключаем файл к нашему скрипту:
|
1 |
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> |
На этом установка плагина mousewheel завершена.
3. Основы работы с плагином.
Теперь, когда плагин установлен, можно начинать работать с ним.
Первое что мы сделаем – это отменим прокрутку страницы в браузере при помощи колеса мыши.
Для этого между тегами head вставляем следующий код:
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ //Вызов плагина $(document).mousewheel(function(event) { //Отменяем действие по умолчанию(скроллинг контента) event.preventDefault(); }); }); </script> |
Как обычно, начинаем работу с библиотекой jQuery, обращаясь к элементу нашей страницы document, и описанием функции в обработчике события ready(). Далее, обратите внимание, опять же обращаемся к элементу document и вызываем плагин mousewheel() (правильнее сказать вызываем основной метод плагина).
Работа этого метода заключается в отслеживании вращения колеса мыши. То есть, другими словами, как только произойдет вращение колеса мыши, выполнится функция описанная внутри метода mousewheel(). В функции, как Вы заметили, я указал переменную (параметр) event. В эту переменную попадет объект, содержащий данные о произошедшем событии. А произошедшее событие – это вращение колеса мыши.
Далее у объекта event есть метод preventDefault() – который отменяет действие по умолчанию. А действие по умолчанию для события вращения колеса мыши – это прокрутка контента в браузере. Поэтому вызываем этот метод и переходим в браузер. Теперь, смотрите, после обновления, если прокрутить колесо мыши, то прокрутки контента не произойдет. То есть мы это сделали, используя плагин mousewheel.
Теперь давайте реализуем, нечто вроде счетчика, который будет считывать вращение колеса мыши. Возвращаемся к открытому файлу scroll.html и вместо javascript кода, что мы только что с Вами разбирали, вставляем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function(){ //Счетчик var val = 0; //Вызов плагина $(document).mousewheel(function(event,delta) { //Счетчик положительное вращение(от себя) if(delta > 0) { val++; } //Отрецательное вращение(на себя) if(delta < 0) { val--; } //Вставляем значение счетчика в блок с id="result" $("#result").html(val); //Отменяем действие по умолчаниу(скроллинг контента) event.preventDefault(); }); }); |
В начале, как Вы видите, все как обычно. Затем создаем переменную val – это и есть наш будущий счетчик. И записываем в него начальное значение, то есть 0. Далее вызываем плагин mousewheel. И описываем в нем функцию, которая выполнится при вращении колеса мыши. Обратите внимание, что в функции я указываю вторым параметром переменную delta. Эта переменная будет показывать нам направление вращения колеса мыши.
При положительном вращении – от себя, значение этой переменной будет больше нуля, при отрицательном – на себя – меньше нуля.
Это можно легко проверить, если сразу в теле функции вывести значение переменной с помощью функции alert(), а остальной код закомментировать:
|
1 |
alert(delta); |
Теперь если перейти в браузер то можно увидеть вот такую картину, при положительном вращении мыши (от себя):
Видно, да что значение переменной delta, установилось в 1. Теперь вращаем колесо мыши на себя:
Как Вы видите, значение переменной delta теперь равно -1.
Но возвращаемся к нашему коду. Теперь зная как ведет себя переменная delta при разных направлениях вращения мыши, мы можем составить две проверки (два условия if). Первое, если совершается положительное вращение, то мы переменную счетчика val будем увеличивать на единицу. И второе условие, если совершается отрицательное вращение, то переменную счетчика val будем уменьшать на единицу.
Далее просто выводим значение переменной val в блок div с идентификатором result, с помощью метода html(), который, напомню, позволяет вставлять данные в выбранные блок. Теперь переходим в браузер и смотрим, что у нас получилось.
Я думаю, Вы заметили, что при вращении колеса мыши от себя, значение счетчика увеличивается, а при вращении – на себя – уменьшается.
Но сейчас есть одно маленькое неудобство. Получается, что действие для колесика мыши мы с Вами описали, но при этом не работает перемещение полосы прокрутки при помощи колеса мыши. Нужно это исправить. Давайте сделаем так, что бы счетчик работал только тогда, когда курсор мыши находится над блоком с идентификатором scroll. Если же курсор находится в другом месте, то счетчик работать не должен, а вращение колеса мыши приводило бы к обычному результату, то есть перемещению полосы прокрутки.
Я думаю, Вы догадались, как это сделать, нужно просто плагин mousewheel вызывать у выбранного блока div с идентификатором scroll. То есть наш код нужно немного поправить, вот таким образом:
|
1 2 |
$("#scroll").mousewheel(function(event,delta) { ….. |
Теперь смотрите, когда курсор находится над блоком div, только тогда запускается плагин mousewheel и только тогда отменяется действие по умолчанию для колеса мыши.
4. Управление слайдером библиотеки jQuey UI колесиком мыши.
Теперь, когда мы научились работать с плагином mousewheel, предлагаю для закрепления знаний научиться управлять виджетом слайдер библиотеки jQuery UI. Открываем файл price.html.
Как Вы помните, в этом файле мы описывали небольшой блок для задания диапазона цен при помощи виджета слайдер. То есть мы создали блок, у которого диапазон цен можно было задавать при помощи двух ползунков. Вот на один из этих ползунков мы и «повесим» управление колесиком мыши. Я предлагаю это сделать только лишь для примера, для того что бы научиться работать с виджетом слайдер.
Итак, в файл price.html. вставляем следующий код (код вставляем в конец javascript кода, что мы описывали в прошлом уроке, но в теле функции jQuery):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Вызов плагина $("#options").mousewheel(function(event,delta) { //Получаем текущее значени правого полунка слайдера var value = $("#slider_price").slider("values",1); //Для оложительонго вращения колеса мыши if(delta > 0 && value < 700) { //Увеличиваем значение слайдера в соответствии с шагом value += 100; } //Для отрецательонго вращения колеса мыши if(delta < 0 && value > 100) { //Уменьшаем значение слайдера в соответствии с шагом value -= 100; } //Устанавливаем новое значение слайдера $("#slider_price").slider("values",1,value); //Выводим значение слайдера в блоке показа цены $("#price2").val(value); }); |
Как обычно, первым делом необходимо вызвать плагин mousewheel, что мы и делаем для блока div с идентификатором options.
Далее получаем текущее значение правого ползунка и сохраняем в переменной value. Как Вы помните, для этого мы выбираем блок div с идентификатором slider_price и вызываем метод slider(). Далее этому методу передаем два параметра: первый «values» – означает, что мы хотим получить или установить значение ползунков слайдера (если передадим еще и третий параметр, то мы не получим значение, а установим новое), второй 1 – индекс (номер) ползунка, в нашем случае правый ползунок имеет номер 1.
Затем проверяем куда выполняется вращение колеса мыши, а также проверяем числовое значение ползунка слайдера, для того, чтобы не выйти за пределы максимального и минимального значения. Как Вы помните, мы в прошлом уроке, при описании слайдера, задавали два этих значения. Для положительного вращения максимальное значение не должно превышать 700, а для отрицательного – минимальное значение не должно быть меньше 100.
Далее в соответствии с направление вращения либо увеличиваем значение переменной value на единицу шага, либо уменьшаем. Шаг у нас равен 100, как Вы помните, мы его также задавали на прошлом уроке.
Затем устанавливаем новое значение ползунка слайдера, которое храниться в переменной value. Для этого используем уже знакомый нам метод slider(), и передаем ему третий параметр – переменную value.
Теперь осталось просто вывести новое значение ползунка слайдера на экран в текстовом поле с идентификатором price2. Что мы и делаем при помощи метода val(), параметром передаем ему переменную value.
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Как Вы видите, теперь, если навести курсор мыши на блок с диапазоном цен и вращать колесо мыши, то правый ползунок начинает перемещаться. Тем самым изменяя значение верхнего предела цены.
Далее давайте немного улучшим галерею изображений, которую мы делали на прошлом уроке. Как Вы помните, с помощью виджета слайдер выполнялась горизонтальная прокрутка изображений галереи. Я предлагаю сделать возможность горизонтальной прокрутки изображений при помощи колесика мыши.
Для этого открываем файл slider.html и добавляем следующий код (опять же внутри функции jQuery в конце кода на языке javascript):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//Вызываем плагинmousewheel $(".demo").mousewheel(function(event,delta) { //Получаем текущее значени правого полунка слайдера var value = $(".scroll-bar").slider("option","value"); //Для оложительонго вращения колеса мыши if(delta > 0 && value < 100) { //Увеличиваем значение слайдера value+=10; } //Для отрецательонго вращения колеса мыши if(delta < 0 && value > 0) { //Уменьшаем значение слайдера value-=10; } //Устанавливаем новое значение ползунка слайдера $(".scroll-bar").slider("option","value",value); //Устанавливаем левый отступ, для того что бы переместить изображения scrollContent.css( "margin-left", Math.round( value / 100 * ( scrollPane.width() - scrollContent.width() ) ) + "px" ); //Отменяем действие по умолчанию event.preventDefault(); }); |
Итак, в начале, как обычно вызываем плагин mousewheel. Затем получаем текущее значение ползунка слайдера, используя метод slider(). И передаем ему параметры: option – то есть, получаем доступ к параметрам слайдера, value – получаем значение ползунка слайдера. Далее проверяем направление вращения и так же не забываем проверять, что бы значение слайдера не превысило максимально и минимально возможные значения. Так как мы в прошлом уроке не задавали эти значения, значит по умолчанию минимальное значение – это 0, максимальное – 100. В соответствии с направлением вращения колеса мыши – увеличиваем или уменьшаем значение переменной value, в которой записано текущее значение слайдера.
Я за один шаг вращения, увеличиваю либо уменьшаю на 10 единиц, значения ползунка сладейра. Мне кажется это оптимально, для нормального перемещения изображений.
Далее устанавливаем новое значение слайдера, которое хранится в переменной value. Для этого передаем третьим параметром эту переменную в метод slider().
Последнее, что нам осталось сделать — это с помощью левого внешнего отступа подвинуть блок с изображениями на величину нового значения слайдера. Для этого используем часть кода из прошлого урока, только подставляем значение слайдера – переменную value. Как Вы видите, ничего сложного нет:
В начале выбираем блок для которого нужно задать левый отступ – это блок с классом class=»scroll-content» и его выборка хранится в переменной scrollContent.
Затем применяем к выборке метод css.
Устанавливаем правило margin-left.
Значение правила получаем исходя из округления результата от деления значения, что хранится в переменной value и разницы ширины двух блоков. Первый блок с классом class=»scroll-pane», второй с классом class=»scroll-content».
И в конце отменяем действие по умолчанию для колесика мыши. Теперь давайте перейдем в браузер и посмотрим, что получилось:
Теперь управлять прокруткой изображений можно при помощи колеса мыши. Мне кажется это очень удобная возможность. Смотрите, как используя этот плагин, и несколько строчек кода, можно значительно улучшить юзабельность скрипта. Поэтому, применяйте его по своему усмотрению в своих скриптах.
А на этом у меня все. Надеюсь, Вам было интересно. Если возникнут вопросы, пишите — мы постараемся на них ответить. Всего Вам доброго и удачного кодирования.
Комментарии (2)