Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

14

Від автора: на сьогоднішньому уроці я хотів би розглянути дуже цікавий плагін бібліотеки jQuery під назвою jquery.mousewheel, який дозволяє здійснювати якісь дії при обертанні колеса миші. Іншими словами, він дозволяє нам обробляти подія обертання коліщатка миші на свій розсуд.

На початку ми з Вами розглянемо, де взяти цей плагін і як з ним працювати, а потім за допомогою даного плагіна навчимося керувати віджетом слайдер бібліотеки jQuery UI, тобто закріпимо отримані знання на практиці. Для цього ми з Вами візьмемо вихідні файли з попереднього уроку (практичне застосування віджета слайдер бібліотеки jQuery UI), який ми з Вами проходили раніше.

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка мишіУправління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

1. Підготовка до уроку.

Для початку давайте візьмемо вихідні файли до уроку — Практичне застосування віджета слайдер бібліотеки jQuery UI, який ми з Вами проходили раніше. Для тих, хто не дивився цей урок і не розуміє про що зараз йде мова, я настійно рекомендую подивитися цей урок. Так як в сьогоднішньому уроці я буду використовувати деякі поняття та змінні з минулого уроку.

Далі скопіюємо вихідні файли в окрему папку на нашому локальному комп’ютері. Структура файлів та папок у Вас повинна вийти ось такий:

css

images

js

price.html

slider.html

Як Ви пам’ятаєте, в папці js у нас збережені бібліотеки jQuery і jQuery UI. Тепер давайте створимо новий файл під назвою scroll.html з ось таким кодом:

Скрипт обробки обертання колеса миші

LINE 1

LINE 2

LINE 3

LINE 4

LINE 5

LINE 6

LINE 7

LINE 8

LINE 9

LINE 10

Як Ви бачите це звичайна html-розмітка, яка нам знадобиться для демонстрації плагін jquery.mousewheel. Спершу підключаємо бібліотеку jQuery яка розташовується в паці js. Далі створюємо два блоки div:

перший з ідентифікатором scroll – він нам знадобиться для того, щоб тільки в цьому блоці обробляти подія обертання коліщатка мишки;

другий з ідентифікатором result – цього блоку ми будемо виводити різні допоміжні результати.

Потім створюємо кілька абзаців p, для того що б у браузері з’явилася смуга прокрутки. Це нам потрібно для тестування роботи плагіна. Так як за замовчуванням обертання коліщатка миші призводить до переміщення смуги прокручування. Ми це дія з Вами скасуємо і призначимо інше, але про це пізніше. А зараз давайте перейдемо в браузер і подивимося, що у нас вийшло:

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Як бачите, нічого складного – два звичайних блоку і кілька рядків тексту для відображення смуги прокрутки.

2. Установка плагіна mousewheel.

Завантажити плагін mousewheel можна з офіційного сайту розробника. Переходимо на сайт і гукнемо по посиланню Download.

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Далі завантажуємо останню стабільну версію. На момент запису уроку – це версія mousewheel 3.0.6.

Потім розпаковуємо отриманий архів. В отриманій папці після розпакування Ви побачите файл jquery.mousewheel.js – це і є плагін mousewheel.

Далі копіюємо цей плагін в папку js, де розміщуються бібліотеки jQuery jQuery UI. І підключаємо файл до нашого скрипта:

На цьому установка плагіна mousewheel завершена.

3. Основи роботи з плагіном.

Тепер, коли плагін встановлений, можна починати працювати з ним.

Перше, що ми зробимо – це скасуємо прокрутку сторінки у браузері за допомогою колеса миші.

Для цього між тегами head вставляємо наступний код:

$(document).ready(function(){
//Виклик плагіна
$(document).mousewheel(function(event) {
//Скасовуємо дія за замовчуванням(скролінг контенту)
event.preventDefault();
});
});

Як завжди, починаємо роботу з бібліотекою jQuery, звертаючись до елементу нашої сторінки document, і описом функції обробника події ready(). Далі, зверніть увагу, знову звертаємося до елемента document і викликаємо плагін mousewheel() (правильніше сказати викликаємо основний метод плагіна).

Робота цього методу полягає у відстеженні обертання колеса миші. Тобто, іншими словами, як тільки відбудеться обертання колеса миші, виконається функція описана всередині методу mousewheel(). У функції, як Ви помітили, я вказав змінну (параметр) event. В цю змінну потрапить об’єкт, який містить дані про подію, що сталася. А подія подія – це обертання колеса миші.

Далі у об’єкта event є метод preventDefault() – який скасовує дію за замовчуванням. А дія за умовчанням для події обертання колеса миші – це прокручування вмісту в браузері. Тому викликаємо цей метод і переходимо в браузер. Тепер, дивіться, після оновлення, якщо прокрутити колесо миші, то прокрутки вмісту не відбудеться. Тобто ми це зробили, використовуючи плагін mousewheel.

Тепер давайте реалізуємо, щось на зразок лічильника, який буде зчитувати обертання колеса миші. Повертаємося до відкритого файлу scroll.html і замість javascript коду, що ми тільки що з Вами розбирали, вставляємо наступний код:

$(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(), а решті код закоментувати:

alert(delta);

Тепер якщо перейти в браузер то можна побачити ось таку картину, при позитивному обертанні миші (від себе):

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Видно, що значення змінної delta, встановилося в 1. Тепер крутимо колесо миші на себе:

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Як Ви бачите, значення змінної delta тепер дорівнює -1.

Але повертаємося до нашого коду. Тепер знаючи як веде себе мінлива delta при різних напрямках обертання миші, ми можемо скласти дві перевірки (дві умови if). Перше, якщо відбувається позитивне обертання, то ми змінну лічильника val будемо збільшувати на одиницю. І друга умова, якщо відбувається негативне обертання, то змінну лічильника val будемо зменшувати на одиницю.

Далі просто виводимо значення змінної val у блок div id result, з допомогою методу html), який, нагадаю, дозволяє вставляти дані в обрані блок. Тепер переходимо в браузер і дивимося, що у нас вийшло.

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Я думаю, Ви помітили, що при обертанні колеса миші від себе, значення лічильника збільшується, а при обертанні – на себе – зменшується.

Але зараз є одна маленька незручність. Виходить, що дія для коліщатка мишки ми з Вами описали, але при цьому не працює переміщення смуги прокручування за допомогою колеса миші. Потрібно це виправити. Давайте зробимо так, що б лічильник працював тільки тоді, коли курсор миші знаходиться над блоком з ідентифікатором scroll. Якщо ж курсор знаходиться в іншому місці, то лічильник працювати не повинен, а обертання колеса миші призводило б до звичайного результату, тобто переміщення смуги прокручування.

Я думаю, Ви здогадалися, як це зробити, треба просто плагін mousewheel викликати у обраного блоку div id scroll. Тобто наш код потрібно трохи поправити, ось таким чином:

$(«#scroll»).mousewheel(function(event,delta) {
…..

Тепер дивіться, коли курсор знаходиться над блоком div, тільки тоді запускається плагін mousewheel і тільки тоді скасовується дія за умовчанням для колеса миші.

4. Управління слайдером бібліотеки jQuey UI коліщатком миші.

Тепер, коли ми навчилися працювати з плагіном mousewheel, пропоную для закріплення знань навчитися керувати віджетом слайдер бібліотеки jQuery UI. Відкриваємо файл price.html.

Як Ви пам’ятаєте, в цьому файлі ми описували невеликий блок для завдання діапазону цін за допомогою віджета слайдер. Тобто ми створили блок, у якого діапазон цін можна було задавати за допомогою двох повзунків. Ось один з цих повзунків ми і «повісимо» управління коліщатком миші. Я пропоную це зробити лише для прикладу, для того, що б навчитися працювати з віджетом слайдер.

Отже, файл price.html. вставляємо наступний код (код вставляємо в кінець javascript коду, що ми розповідали у минулому уроці, але в тілі функції jQuery):

//Виклик плагіна
$(«#options»).mousewheel(function(event,delta) {
//Отримуємо поточне значення правого полунка слайдера
var value = $(«#slider_price»).slider(«values»,1);
//Для оложительонго обертання колеса миші
if(delta > 0 && value < 700) {
//Збільшуємо значення слайдера у відповідності з кроком
value += 100;
}
//Для отрецательонго обертання колеса миші
if(delta 100) {
//Зменшуємо значення слайдера у відповідності з кроком
value -= 100;
}
//Встановлюємо нове значення слайдера
$(«#slider_price»).slider(«values»,1,value);
//Виводимо значення слайдера в блоці показу ціни
$(«#price2»).val(value);
});

Як правило, першою справою необхідно викликати плагін mousewheel, що ми і робимо для блоку div id options.

Далі отримуємо поточне значення правого повзунка і зберігаємо в змінної value. Як Ви пам’ятаєте, для цього ми вибираємо блок div id slider_price і викликаємо метод slider(). Далі цього методу передаємо два параметри: перший «values» – означає, що ми хочемо отримати або встановити значення повзунків слайдера (якщо передамо ще й третій параметр, то ми не отримаємо значення, а встановимо нове), другий 1 – індекс (номер) повзунка, в нашому випадку правий повзунок має номер 1.

Потім перевіряємо куди виконується обертання колеса миші, а також перевіряємо числове значення повзунка слайдера, для того, щоб не вийти за межі максимального і мінімального значення. Як Ви пам’ятаєте, ми в минулому уроці, при описі слайдера, задавали два значення. Для позитивного обертання максимальне значення не повинно перевищувати 700, а для негативного – мінімальне значення не повинно бути менше 100.

Далі відповідно до напрямок обертання або збільшуємо значення змінної value на одиницю кроку, або зменшуємо. Крок у нас дорівнює 100, як Ви пам’ятаєте, ми його також ставили на минулому уроці.

Потім встановлюємо нове значення повзунка слайдера, яке зберігається в змінної value. Для цього використовуємо вже знайомий нам метод slider(), і передаємо йому третій параметр – змінну value.

Тепер залишилося просто вивести нове значення повзунка слайдера на екран в текстовому полі з ідентифікатором price2. Що ми і робимо за допомогою методу val(), параметром передаємо йому змінну value.

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Як Ви бачите, тепер, якщо навести курсор миші на блок з діапазоном цін і обертати колесо миші, то правий повзунок починає переміщатися. Тим самим змінюючи значення верхньої межі ціни.

Далі давайте трохи покращимо галерею зображень, яку ми робили на минулому уроці. Як Ви пам’ятаєте, за допомогою віджета слайдер виконувалася горизонтальна прокрутка зображень галереї. Я пропоную зробити можливість горизонтальної прокрутки зображень за допомогою коліщатка миші.

Для цього відкриваємо файл slider.html і додаємо наступний код (знову ж всередині функції jQuery в кінці коду на мові javascript):

//Викликаємо плагинmousewheel
$(«.demo»).mousewheel(function(event,delta) {
//Отримуємо поточне значення правого полунка слайдера
var value = $(«.scroll-bar»).slider(«option»,»value»);
//Для оложительонго обертання колеса миші
if(delta > 0 && value < 100) {
//Збільшуємо значення слайдера
value+=10;
}
//Для отрецательонго обертання колеса миші
if(delta 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».

І в кінці скасовуємо дія за умовчанням для коліщатка миші. Тепер давайте перейдемо в браузер і подивимося, що вийшло:

Управління віджетом слайдер бібліотеки jQuery UI за допомогою коліщатка миші

Тепер керувати прокруткою зображень можна за допомогою колеса миші. Мені здається це дуже зручна можливість. Дивіться, як використовуючи цей плагін, і кілька рядків коду, можна значно поліпшити юзабельность скрипта. Тому, використовуйте його на свій розсуд у своїх скриптах.

А на цьому у мене все. Сподіваюся, Вам було цікаво. Якщо виникнуть питання, пишіть — ми постараємося на них відповісти. Всього Вам доброго і вдалого кодування.