Повзунок призначений для введення чисел у вказаному діапазоніале на відміну від поля має інший інтерфейс і застосовується в тих випадках, коли не особливо важливо вказувати точне значення. На рис. 1 продемонстровано вигляд повзунка в різних браузерах.
Мал. 1. Вигляд повзунка у браузерах
Синтаксис створення повзунка наступний.
Тут min – мінімальне число в діапазоні (за замовчуванням 0), max – максимальне число (за замовчуванням 100), step – крок зміни чисел (за замовчуванням 1), value – поточне значення. За замовчуванням value обчислюється за такою формулою:
Якщо значення maxменше ніж значення min, то value одно min .
Атрибути не є обов'язковими, їх можна опустити, у такому разі вони набувають значення за замовчуванням.
Незалежно від мінімального та максимальної кількостіширина повзунка залишається однаковою.
Самі повзунки рідко застосовуються у «чистому» вигляді, оскільки не забезпечують необхідну Зворотній зв'язокз користувачем, а ось у поєднанні з JavaScript це стає потужним та зручним елементом інтерфейсу. У прикладі 1 за допомогою повзунка змінюється розмір зображення, така можливість часто використовується різних фотогалереях.
Приклад 1. Використання повзунка
HTML5 IE 10 Cr Op Sa Fx
Повзунок function sizePic() ( size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Розмір малюнка:
У даному прикладіПри керуванні повзунком спрацьовує подію на вхід, що викликає функцію sizePic. Ця функція змінює розмір зображення залежно від встановленого користувачемзначення повзунка. Тим самим ширина картинки за бажання зменшується чи навпаки, збільшується. Результат прикладу при крайньому значенні повзунка в браузері Chromeпоказано на рис. 2.
Мал. 2. Управління шириною картинки за допомогою повзунка
Старі версії браузерів, які не підтримують значення range для атрибута type, відображають поле форми як текстове.
При верстці якогось магазину часто доводиться стикатися із завданням реалізувати зручний для користувача вибір цінового діапазону. Виглядати це може, наприклад, так:
Ідея, сподіваюся, зрозуміла. Перетягуємо повзунки, значення полів одночасно змінюються. Спробуймо це реалізувати.
ЗавданняЗнайти кросбраузерне рішення js для інтерфейсу вибору діапазону. Вимоги:
- інпути і повзунки пов'язані (зміна значення одних відразу відбивається на інших);
- гнучкість стилізації (все має виглядати за дизайном).
Будемо використовувати плагін jQuery UI Slider. Сам по собі він просто створює повзунок, але подружити його з інпутами не складе труднощів.
Перевірено у:
- IE 6-8
- Firefox 4
- Opera 11
- Safari
- Chrome
Отже, спочатку давай припустимо, що інпутів немає, і подивимося, як працює сам плагін.
Що качати?- (24.33 Kb) ядро UI + сам слайдер.
Підключаємо бібліотеки:
Ініціалізуємо повзунок скриптом:
jQuery("#slider").slider(( min: 0, max: 1000, values: , range: true ));
А тепер докладнішеПлагін досить гнучкий. Дозволяє створювати вертикальні або горизонтальні треки, по яких може ходити один або два повзунки. Варіант із двома повзунками якраз ідеально підійде для нашого завдання – вибору діапазону.
У момент переміщення повзунка або його зупинки можна виконувати якусь функцію, завдяки чому повзунок можна використовувати як елемент управління (змінювати значення інпутів, селектів, або, наприклад, перемикати вкладки — на офіційному сайті плагіна є такий демо-приклад).
НалаштуванняПри ініціалізації плагіна можна встановити його параметри:
| Вимикає (true) або вмикає (false) слайдер. | boolean | false |
| Визначає, чи повзунок пересуватиметься в точку плавно, коли користувач клацає на точку на смузі. Також може приймати значення string, що представляє одну з трьох швидкостей на вибір ("slow", "normal", або "fast") або число мілісекунд, що визначає тривалість анімації (наприклад, 1000). | boolean, string, int | false |
| Максимальне значення слайдера. | Номер | 100 |
| Мінімальне значення слайдера. | Номер | 0 |
| Визначає орієнтацію шкали: зліва направо чи знизу нагору. Можливі значення: "horizontal", "vertical". | String | horizontal |
| Якщо виставлено в true, на слайдері буде дві повзунки і діапазон між ними, який можна стилізувати. Два інші значення це "min" та "max". Значення "min" створює діапазон від мінімуму шкали до повзунка. Значення "max" створює діапазон від повзунка до максимуму шкали. | boolean, string | false |
| Визначає крок слайдера. Повний діапазоншкали (max − min) має рівномірно ділиться на крок. | Номер | 1 |
| Визначає значення слайдера, якщо є лише один повзунок. Якщо є більше одного повзунка, визначає значення першого повзунка. | Номер | 0 |
| Ця опція може використовуватися для вказівки кількох повзунків. Якщо range має значення true, значень "values" має бути 2. | Array | null |
Події - це функції, які будуть виконуватися в певні моментижиття повзунка. Задавати їх можна за ініціалізації. Наприклад:
JQuery("#slider").slider(( stop: function(event, ui) ( alert("Повзунок переїхав на нову позицію!"); ) ));
Перелік подій:
| Подія виникає в момент створення повзунка |
| Подія виникає у момент, коли користувач починає рухати повзунок. |
| Подія відбувається при кожному переміщенні миші під час прокручування. Використовуйте ui.value (слайдери з одним повзунком), щоб отримати поточне значення повзунка, $(..).slider("value", index), щоб отримати значення повзунка для слайдерів з кількома повзунками. |
| Подія відбувається при зупинці прокручування або якщо величина змінюється програмним способом(З допомогою методу value). Приймає аргументи event та ui. Використовуйте event.orginalEvent, щоб визначити, чи змінилося значення за допомогою миші, клавіатури або програмно. Використовуйте ui.value (слайдери з одним повзунком), щоб отримати поточне значення повзунка, $(this).slider("values", index), щоб отримати значення повзунка для слайдерів з кількома повзунками. |
| Подія виникає в момент, коли користувач перестав рухати повзунок. |
Виклик цих функцій дозволяє вплинути працювати повзунка, нальоту змінивши його параметри. Робиться це за допомогою конструкції. slider (), наприклад ось так:
JQuery("#slider").slider("values",0, 100);
Список методів:
| Видаляє функціонал повзунка, повертаючи елемент до початкового стану. |
| Вимикає слайдер. |
| Вмикає слайдер. |
| Отримує або встановлює будь-яку опцію слайдера. Якщо значення не вказано, виступатиме як одержувач. Синтаксис: .slider("option", optionName , ) |
| Встановлює одразу кілька опцій слайдера шляхом надання опцій об'єкта. Синтаксис: .slider("option", options) |
| Повертає елемент ui-slider. |
| Встановлює чи повертає значення слайдера. Для слайдерів із одним повзунком. |
| Встановлює чи повертає значення слайдера. Для слайдерів з кількома повзунками або діапазоном. |
Взагалі стилізація елементів jQuery UI (одним з яких є даний слайдер) відбувається шляхом вибору теми, що сподобалася, і завантаження з офіційного сайту готового CSS. Особисто мене такий підхід не влаштовує зовсім. Тому я вибрав з їхнього (дуже надлишкового, якщо використовувати тільки слайдер) CSS тільки потрібний код, який тут і наводжу із коментарями.
/* Ширина слайдера */ #slider ( width: 200px; ) /* Контейнер слайдера */ .ui-slider ( position: relative; ) /* Повзунок */ .ui-slider .ui-slider-handle ( position: absolute; z-index: 2; width: 13px;/* Задаємо потрібну ширину */ height: 13px;/* і висоту */ background: url(../img/slider.png) no-repeat; Або можна залити кольором, задати бордюр і заокруглення */ cursor: pointer ) .ui-slider .ui-slider-range ( position: absolute; z-index: 1; font-size: .7em; display: block; border: 0 overflow: hidden; ) /* горизонтальний слайдер (сама смуга по якій бігає повзунок) */ .ui-slider-horizontal ( height: 3px; /* задаємо висоту згідно дизайну */ ) /* позиціонуємо повзунки */ .ui-slider -horizontal .ui-slider-handle ( top: -5px; margin-left: -6px; ) .ui-slider-horizontal .ui-slider-range ( top: 0; height: 100%; ) .ui-slider- horizontal .ui-slider-range-min ( left: 0; ) .ui-slider-horizontal .ui-slider-range-max ( right: 0; ) /* оформлення смуги по якій ходить повзунок */ .ui-widget- content ( border: 1px solid #D4D4D4; background: #fff; ) /* оформлення активної ділянки (між двома повзунками) */ .ui-widget-header ( border: 1px solid #D4D4D4; background: #f00; ) /* округлення для смуги слайдера */ .ui-corner-all ( -moz -border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px;
Деякі з цих правил можна поєднати, так як плагін щедро нагороджує елементи безліччю класів. Наприклад, мій початковий
перетворюється в
Але я вважав за краще залишити стилі в такому вигляді для більшої універсальності. Думаю, той, кому доведеться за цим шаблоном стилізувати вертикальний повзунок, скаже мені спасибі.
Додаємо пов'язані інпутиТепер найцікавіше. Додамо два інпути, в яких відображатимемо значення, вибрані на слайдері.
При ініціалізації слайдера використовуємо події stop і slide - перше забезпечить коректне значення в момент зупинки повзунка, а друге додасть інтерактивності (значення інпуту буде змінюватися в реальному часі, синхронно рух повзунка).
Код обох подій однаковий - беремо поточне значення за допомогою методу. slider ("values", X) і поміщаємо в потрібний інпут:
JQuery("#slider").slider(( min: 0, max: 1000, values: , range: true, stop: function(event, ui) ( jQuery("input#minCost")). jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); ), slide: function(event , ui)( jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider" ).slider("values",1)); ) ));
Залишилося організувати зворотний зв'язок. Вчимо повзунок переміщатися, якщо користувач вводить значення інпут. Тут можна використовувати подію keypress, щоб повзунок реагував на кожну натиснуту клавішу або подію change, якщо хочемо, щоб зміна набирала чинності після завершення введення та відходу з поля. Справа смаку.
Заодно я вставив перевірку виходу верхнього значення за межі діапазону (у мене це 1000) і перевірку, щоб нижній повзунок не отримав значення більшого за верхнє:
JQuery("input#minCost").change(function()( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if(parseInt (value1) > parseInt(value2))( value1 = value2; jQuery("input#minCost").val(value1); ) jQuery("#slider").slider("values",0,value1); ; jQuery("input#maxCost").change(function()( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if (value2 > 1000) ( value2 = 1000; jQuery("input#maxCost").val(1000)) if(parseInt(value1) > parseInt(value2))( value2 = value1; jQuery("input#maxCost").val( value2);) jQuery("#slider").slider("values",1,value2); ));
Остання деталь - потрібно забезпечити, щоб користувач не зміг поламати плагін, ввівши в інпути літери або некоректні числові значення. Цей момент докладно не розглядаю, оскільки не стосується безпосередньо теми статті. Цікавих відсилаю до , де це, звісно, реалізовано.
В одній із наступних публікацій ми ускладнимо завдання. Я покажу, як на основі цього рішення можна зробити вибір значення з нерівномірним кроком різним масштабом. Тобто коли потрібно, щоб, наприклад, першу половину слайдера припадав діапазон значень від 0 до 100, але в другу від 100 до 1000.
Подібні варіанти досить часто зустрічаються в інтернет-магазинах - це зручно, адже на маленьких сумах делалізація важливіша, а зручність користувача, як відомо, насамперед.
Повзунок призначений для введення чисел у вказаному діапазоні, але, на відміну від поля, має інший інтерфейс і застосовується в тих випадках, коли не дуже важливо вказувати точне значення. Браузери своїм відображають вигляд повзунка, так на рис. 1 продемонстровано вигляд повзунка в Chrome.
Мал. 1. Вигляд повзунка
Синтаксис створення повзунка наступний.
Тут min – мінімальне число в діапазоні (за замовчуванням 0), max – максимальне число (за замовчуванням 100), step – крок зміни чисел (за замовчуванням 1), value – поточне значення. За замовчуванням value обчислюється за такою формулою:
Якщо значення max менше, ніж значення min, то value дорівнює min.
Атрибути не є обов'язковими, їх можна опустити, у такому разі вони набувають значення за замовчуванням. Незалежно від мінімального та максимального числа ширина повзунка залишається однаковою.
Самі повзунки рідко застосовуються у «чистому» вигляді, оскільки не забезпечують необхідний зворотний зв'язок з користувачем, а ось у поєднанні з JavaScript це стає потужним та зручним елементом інтерфейсу. У прикладі 1 за допомогою повзунка змінюється розмір зображення, така можливість часто використовується різних фотогалереях.
Приклад 1. Використання повзунка
Повзунок function sizePic() ( size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Розмір малюнка:
У цьому прикладі при керуванні повзунком спрацьовує подію на зміну, що викликає функцію sizePic. Ця функція змінює розмір зображення залежно від встановленого користувачем повзунка. Тим самим ширина картинки за бажання зменшується чи навпаки, збільшується. Результат прикладу в браузері IE показано на рис. 2.
На даний час я працюю над своїм першим оплачуваним проектом. Крім усього іншого, у цьому проекті від мене потрібна стилізація та написання скриптів для повзунків. є декілька цікавих моментів, на які мені хотілося б звернути вашу увагу, такі як проблеми відображення в IE , Android WebKit та правильне використанняподій введення та зміни. А також короткий оглядсинтаксису.
Ось мій приклад. У цьому конкретному випадку користувачів із Голландії за допомогою повзунків просять поділити 100 мільйонів євро. бюджетних коштівміж кількома відомствами. У цьому загальне значення всіх повзунків має перевищувати 100 (мільйонів ), що вимагає написання невеликого скрипта.
Повзунок, доріжка та бігунокОсь повзунок. Технічно він відомий як і він не підтримується IE9 і нижче.
Тут код HTML:
Повзунок складається з доріжки, якою користувач перетягує бігунок. До доріжки та бігунка можна застосовувати стилі, але не скрипти.
Основи стилівСтилізація повзунків не така вже й важка. Для бігунка та доріжки можна налаштувати стилі, хоча необхідні псевдоелементи залежать від браузера:
Для бігунка використовується -webkit-slider-thumb, -moz-range-thumb або -ms-thumb.
До доріжки можна "звернутися" за допомогою -webkit-slider-runnable-track, -moz-range-track або -ms-track.
Не можна комбінувати ці селектори в одному правилі, навіть незважаючи на те, що правильніше використовувати для всіх браузерів ті самі стилі (крім відступів для бігунка). Якщо браузер знаходить один селектор, який він не розпізнає, ігнорує всі інші. Тому вам доведеться повторюватися або використовувати генератор CSS на серверній стороні.
IE та MS Edge вимагають прозорий color та border-color на доріжці, або вони відобразять стилі доріжки за умовчанням. Крім того, для повзунка їм потрібні інші відступи, ніж інші браузери.
У моєму прикладі висота повзунка приблизно 40 пікселів. Виявляється, в основних стилях повзунка встановлено властивість overflow: hidden , яке приховує більшу частину повзунка в Edge та IE. Щоб виправити це, мені довелося задати висоту повзунка.
У IE, але не в Edge, повзунок має відступ. Тому задайте відступ padding: 0 і врятуйте себе від головного болю.
Я читав кілька разів, що MS Edge має підтримувати властивості -webkit-. Але на практиці виявилося, що неможливо працювати з одним набором стилів і для Edge, і для WebKit/Blink. Я раджу використовувати окремі -ms-стилі хоча б тому, що вони потрібні для IE10 та IE11. Найкраще визначити стилі -ms- після -webkit-: таким чином -ms-стилі будуть точно виконуватися в Edge.
У браузерах, побудованих на основі движків WebKit і Blink, бігунок має за замовчуванням box-sizing: border-box, тоді як у всіх інших браузерах, значення цієї властивості дорівнює content-box. Краще встановити box-sizing для бігунка в явному вигляді.
WebKit і Blink також вимагають -webkit-appearance: none, але з одним винятком. Дивіться нижче.
CSS шаблонВсі ці несуттєві проблеми призводять до наступного шаблону CSS:
input ( -webkit-appearance: none; height: 35px; /* встановіть свою висоту*/ padding: 0; /* стилі вашого повзунка */ ) input::-webkit-slider-thumb ( -webkit-appearance: none; box -sizing: content-box; */ /* знову стилі вашого бігунка */ /* можуть знадобитися різні відступи */ ) input::-webkit-slider-runnable-track ( /* стилі вашої доріжки*/ ) input::-moz-range-track ( / * знову стилі вашої доріжки */ ) input::-ms-track ( /* повинен слідувати після -webkit- */ border-color: transparent; color: transparent; /* знову стилі вашої доріжки */ )
Властивість appearance та помилка Android WebKitЩе один недолік у браузерах на основі WebKit і Blink полягає в тому, що ви повинні встановити властивість -webkit-appearance: none для повзунка та для бігунка (але не для доріжки). Це показано у шаблоні CSS, наведеному вище.
Справжня проблема в тому, що Android WebKit вимагає від вас не використовувати це оголошення. Якщо ви додасте -webkit-appearance: none , Android WebKit неправильно відображатиме ваші стилі. Видалення цього коду виправляє помилку, але тоді стилі повзунка не відображатимуться в Safari, Chrome та деяких інших браузерах. Вирішимо цю проблему разом.
Ми задали в CSS -webkit-appearance: none це єдине рішення, у якого є майбутнє. В Android WebKit ми хочемо змінити значення на slider-horizontal. Але як ми дізнаємося, що ми в Android WebKit?
Розпізнавання браузера? Так не прийнято в наших колах – що й на краще: це не спрацювало б у Xiaomi Chromium 34 (або 35 ), який базується на Chromium і, отже, вимагає значення none, але при цьому «маскується» під Android.
Моїм початковим планом було отримати доступ до стилів бігунка і подивитися, чи вони відповідають моїм. Якщо вони не підходять, то ми застосовуємо slider-horizontal:
window.getComputedStyle(slider,"::-webkit-slider-thumb").height;
Виявляється, цей підхід завжди виводить стандартні стилі, а не ваш CSS . Говорячи в загальних рисах, скрипти, які намагаються зробити щось із доріжкою чи бігунком, мають тенденцію не працювати.
Потім я побачив, що це застосування getComputedStyle() не підтримується в Android WebKit. Жоден стиль не повертається, навіть стандартні стилі.
Тому я написав класичний трюк, який використовує одну помилку, щоб позбутися іншої, не пов'язаної з нею. На щастя, це безпечний прийом, тому що обидві помилки можуть з'явитися тільки в Android WebKit, і цей браузер вже не розробляється:
var testAndWK = window.getComputedStyle(slider,"::-webkit-slider-thumb").height; if (!testAndWK) ( slider.style.WebkitAppearance = "slider-horizontal"; )
Ви можете виконати тест один раз та використовувати результати для кожного повзунка. Не має значення, яке властивість CSSви тестуєте, перевірте, чи справді воно існує. Якщо значення не повертається, то встановлюємо -webkit-appearance: slider-horizontal для кожного повзунка. Проблема вирішена. Навіть краще, інші браузери ігнорує нас, поки ми використовуємо webkit-.
Заповнення смуги прогресуУ моєму прикладі доріжка зліва від бігунка повинна мати колір фону, відмінний від доріжки праворуч. IE/Edge та Firefox пропонують для цього використовувати псевдоелементи, WebKit та Blink – ні. Цей код вирішує проблему у всіх версіях IE, Firefox та Edge:
input::-ms-fill-lower ( background-color: #5082e0; ) input::-moz-range-progress ( background-color: #5082e0; )
Що стосується браузерів на основі WebKit-і Blink, то тут потрібне рішення з JavaScript. Я позичив своє з прикладів Ana Tudor. У цьому рішенні використовується лінійний градієнтзі стоп-кольором, що обчислюється від поточного значення повзунка. Перегляньте скрипт , особливо код функції handleSlider() .
Спливаючі підказкиAna Tudor також показала, як можна використовувати псевдоелемент: before як стилізовану підказку, що містить поточне значення. На жаль, з'ясувалося, що в цьому випадку IE/Edge та Firefox не підтримують :before або :after . У IE/Edge є вбудована підказка (див. нижче), але в Firefox неможливо відобразити підказки.
Я пробував рухомий елемент, що реагує на переміщення бігунка, але написання скриптів не спрацьовує, і отримати поточні координати бігунка неможливо. Також намагався використати поточне значення повзунка замість координат, але спроба завершилася провалом. Зрештою, ми вирішили використати статичну підказку (яка насправді не виглядає як підказка).
У IE/Edge є вбудована підказка, яка здебільшого не може бути стилізована. На щастя, ви можете приховати її:
input::-ms-tooltip ( display: none; )
Події введення та зміниКоли користувач пересуває бігунок доріжкою, повзунок може викликати події введення або зміни. Одні браузери безперервно породжують події під час переміщення, інші - тільки після зупинки переміщення.
У разі відстеження дій користувача з повзунком перехоплюйте події введення та зміни. Потім викликайте обробник події, коли користувач припинить рух бігунка. Це дає стабільний результат у всіх браузерах.
І результат застосування повзунка у коді:
Для роботи з повзунком введені такі атрибути:
- max - максимальне значенняелемента (відповідає крайнє праве положення повзунка). Число.
- min - мінімальне значенняелемента (відповідає крайнє ліве положення повзунка). Число.
- step - крок повзунка. Число.
Приклад застосування атрибутів представлений нижче.
|
Крім того, як і з будь-яким елементів HTMLдо input type="range" можна застосувати оформлення CSS.
Як працювати з повзунком у JSОскільки повзунок це елемент Input, то для зчитування його значення можна застосовувати властивість value. У наступному прикладі ми будемо зчитувати значення повзунка та виводити його до абзацу.
function fun1() ( var rng=document.getElementById("r1"); //rng - це Input var p=document.getElementById("one"); // p - абзац p.innerHTML=rng.value; )
function fun1 () ( var rng = document. getElementById (& #x27;r1"); //rng - це Input var p = document. getElementById (& #x27;one"); // p - абзац p. innerHTML = rng. value; |
Зверніть увагу на нову подію навступ. Подія OnInput — спрацьовуємо за будь-якої зміни в елементі форми, наприклад при введенні нового символу, або при переміщенні повзунка на 1px. На відміну від події OnChange - яке спрацьовуємо тільки при втраті фокусу елементом, oninput спрацьовуємо за будь-якої зміни в елементі. Ця подія додає повзунку інтерактивності.
Подія onchange також зручно використовувати разом з елементом select .
Практичне завданняЗавдання 1. Замініть подію OnInput у наведеному прикладі на подію onchange. Вивчіть як змінилася поведінка елементів. Коли відбувається оновлення в абзаці?
Завдання 2. Задайте повзунку мінімальне значення 50, а максимальне 150. Вивчіть, яке мінімальне та максимальне значення виводиться в абзаці?
Завдання 3. Задайте крок повзунка 10. Як відбувається зміна значень в абзаці?
Завдання 4. Задайте крок зміни значень рівним 7. Як змінити максимальне та мінімальне значення?
Продовжуємо працювати з повзунком rangeУвага! Значення з урахуванням властивості value є рядком. Не забувайте їх переводити до числа за допомогою функції parseInt(ваш рядок).
Давайте вирішимо просте завдання: виведемо значення повзунка в input. Для цього необхідно значення властивості повзунок.value передати у властивість input.value. Приклад наведено нижче:
function fun1() ( var rng=document.getElementById("r1"); //rng - це повзунок var i1=document.getElementById("i1"); // i1 - input i1.value=rng.value; )
Практичне завданняЗавдання 5. Вивчіть роботу прикладу наведеного вище. Додайте подію в input type="text" oninput="fun2()". Для функції fun2 запрограмуйте зворотне завдання— ті значення, які вводяться в input, автоматично присвоюються повзунку.
Для закріплення давайте виконаємо ще одне завдання: за допомогою повзунка змінюватимемо розмір блоку div. Верстка задачі представлена нижче:
