Домашня » Кодування » Створення регулятора гучності за допомогою повзунка jQuery UI
Створення регулятора гучності за допомогою повзунка jQuery UI
Якщо ви - мисливець за халяви, швидше за все, ви завантажили багато користувальницьких інтерфейсів PSD (UI). Деякі з них дійсно дивують і можуть заощадити наш час шляхом створення прототипів дизайну, над яким ми працювали.
У цьому пості ми кодуємо PSD UI і перетворюємо його в щось більш функціональне. Ми будемо кодувати наступний слайдер PSD UI, який буде застосований як тему JQuery UI Slider.
Однак, будь ласка занотуй для цього навчального посібника проміжні рівні досвіду. Сказавши, що це, все одно відносно легко слідувати, якщо ви досить добре знайомі з CSS і jQuery.
Гаразд, тепер давайте почнемо.
Крок 1: інтерфейс jQuery
Ми, очевидно, потребуємо jQuery та бібліотеку інтерфейсу jQuery, і ми маємо два варіанти їх використання. По-перше, ми можемо зв'язати JQuery і JQuery UI безпосередньо з наступних CDN: Google Ajax API CDN, Microsoft CDN і JQuery CDN, є багато переваг використання розміщеного файлу CDN, коли ми розміщуємо наш сайт в режимі онлайн.
Але оскільки ми будемо працювати над цим лише в автономному режимі, ми будемо використовувати другий замість цього.
Ми завантажимо та налаштуємо бібліотеку інтерфейсу jQuery на офіційній сторінці завантаження. Оскільки нам потрібен лише плагін Slider, ми виберемо лише бібліотеку Slider разом із залежностями та залишимо інші. Таким чином, файли, які ми використовуємо, будуть набагато тонкішими і завантажуватимуться швидше. Після цього з'єднайте всі ці бібліотеки з документом HTML, бажано внизу сторінки або перед закриттям
, щоб бути точним.
Крок 2: розмітка HTML
Розмітка для слайдера дуже проста, ми перенесли всю необхідну розмітку - підказку, повзунок і обсяг - всередині HTML5 розділ . Після цього інтерфейс jQuery автоматично генерує решту.
Крок 3. Встановіть інтерфейс Slider
Фрагмент нижче встановить повзунок на сторінці, але застосовується лише типова конфігурація.
$ (function () $ ("#slider")) .slider (););
Отже, ми трохи збільшимо слайдер, додавши інші конфігурації.
По-перше, зберігаємо елемент повзунка як змінну.
var slider = $ ('# slider'),
Потім ми встановлюємо мінімальне значення слайдера за замовчуванням 35, коли він спочатку завантажується.
slider.slider (range: "min", значення: 35,);
На даний момент ми ще не побачимо нічого в браузері, оскільки інтерфейс jQuery є в основному тільки генерування розмітки. Отже, нам потрібно застосувати деякі стилі, щоб побачити результат візуально в браузері.
Крок 4: Стилі
Перш ніж продовжити, нам потрібні активи з вихідного файлу PSD, такі як фонова текстура та піктограма.
Ми не будемо говорити про це як нарізати У цій статті ми зупинимося лише на коді. Якщо ви не впевнені, як зробити фрагмент, спочатку перегляньте наступну скриншот перед тим, як продовжити.
Перетворення дизайну з PSD на HTML - Nettuts+
Гаразд, тепер почнемо додавати стилі.
Ми почнемо, розмістивши повзунок у центрі вікна веб-переглядача, і додамо фон, який ми розрізали з PSD, до тіла.
body background: url ('… /images/bg.jpg') повторіть ліворуч; секція ширина: 150px; висота: авто; маржа: 100px auto 0; позиція: відносна;
Далі ми застосуємо стилі для підказки, обсяг, ручкою, повзунка діапазон і повзунок себе.
Ми зробимо цю частину за частиною, починаючи з ...
Повзунок
Оскільки ми не визначили максимальне значення для самого повзунка, інтерфейс jQuery застосує стандартне значення; це 100. Тому ми також можемо подати заявку 100 (px) для повзунка ширина.
Ми трохи змінили піктограму гучності, щоб відповідати нашій ідеї. Ідея полягає в тому, що ми збираємося створити ефект поступово підніміть панель гучності відповідно до значення повзунка. Я впевнений, що ви часто бачили такий ефект у інтерфейсі користувача медіаплеєра.
На цьому кроці ми почнемо працювати над спеціальним ефектом Slider.
Підказка
На цьому етапі підказку поки немає, тому ми збираємося заповнити її значенням повзунка. Також горизонтальне положення підказки буде відповідати положенню ручки.
Перш за все, ми зберігаємо елемент підказки як змінну.
var tooltip = $ ('. tooltip');
Потім ми визначаємо ефект підказки, про який ми згадували вище в Події.
слайд: функція (подія, ui) var value = slider.slider ('value'), tooltip.css ('left', value) .text (ui.value);
Але ми також хочемо, щоб підказка була спочатку прихованою.
tooltip.hide ();
Після цього, коли ручкою збирається розпочати ковзання, він буде показаний з ефектом вмирання.
start: function (event, ui) tooltip.fadeIn ('швидкий'); ,
І, коли користувач припиняє ковзання ручки, підказка буде зникати і бути прихованою.
stop: function (event, ui) tooltip.fadeOut ('швидкий'); ,
Обсяг
Як ми вже згадували вище Розділ Стилі, ми плануємо змінювати піктограму гучності відповідно до позиції ручки або, якщо бути точним, значення повзунка. Таким чином, ми будемо застосовувати наступний умовний оператор для створення цього ефекту.
Але, по-перше, ми зберігаємо елемент обсягу, а також значення повзунка як змінну.
volume = $ ('. volume');
Потім починається умовна операція.
Коли значення повзунка нижче або дорівнює 5 значок гучності взагалі не матиме жодних смужок, що вказує на те, що гучність дуже низька, але коли значення повзунка зростає, панель гучності також збільшиться.
if (значення <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
Помістіть їх разом
Гаразд, у випадку, якщо ви переплутаєтеся з усім вищезазначеним, не будьте. Ось ярлик. Вставте всі наступні коди у документ.
Гаразд, давайте тепер переглянемо результат у браузері.
Демо
Завантажити джерело
Висновок
Сьогодні ми успішно створили більш елегантну тему інтерфейсу jQuery, але в той же час ми успішно переклали користувальницький інтерфейс PSD у функціональний регулятор гучності..
Ми сподіваємося, що цей підручник надихне вас і допоможе вам зрозуміти, як перетворити PSD на більш корисний продукт.
Нарешті, якщо у Вас виникли питання щодо цього підручника, не забудьте додати його в розділі коментарів нижче.
