»» В даній статті використовується вихідний код для прикладів тестування бібліотеки jQuery UI. Збережіть цю сторінку для тестування наведених нижче прикладів.
Тепер, коли ви сконфигурировали, завантажили і встановили бібліотеку jQuery UI, можемо приступити до ознайомлення з містяться в ній віджетами. Віджети - це головні функціональні блоки jQuery UI, і хоча ця бібліотека забезпечує безліч інших можливостей (наприклад, ефекти), саме віджети принесли їй популярність.
Перший з віджетів, з яким ви почнете працювати, надає непогану можливість познайомитися зі світом jQuery UI. Віджет Button відносно простий, але це не заважає йому надавати трансформує вплив на HTML-документи. Даний віджет забезпечує застосування теми jQuery UI до елементів button і a. Це означає, що розмір, форма, характеристики шрифту і колір елемента перетворюються таким чином, щоб їх зовнішній вигляд відповідав обраній вами темі оформлення jQuery UI.
Як показано в прикладі нижче, застосування віджетів jQuery UI не доставляє особливого клопоту:
Застосування віджета Button зводиться до використання jQuery для вибору елементів, які ви хочете перетворити, і викликом методу button (). Всі інші турботи jQuery UI бере на себе.
Результат представлений на малюнку нижче. Зверніть увагу на те, що метод button () застосовується до об'єкта обраного набору елементів jQuery. Між бібліотеками jQuery і jQuery UI існує дуже тісна інтеграція, а це означає, що jQuery UI в цілому використовується так само, як і базові засоби jQuery, розглянуті раніше.
Подібно всім іншим віджетів jQuery UI, віджет Button, який ви бачите на малюнку як кнопку, являє собою набір стилів CSS, застосованих до існуючого HTML-елементу. В результаті застосування методу button () HTML-елемент
перетвориться в наступний елемент:
Елегантність цього підходу полягає в тому, що він дозволяє працювати з HTML-елементами звичним способом, не піклуючись про те, застосовані до них віджети jQuery UI чи ні.
Налаштування віджета Button
Віджет Button jQuery UI має ряд параметрів, що властивостей, за допомогою яких можна управляти способом створення результуючої кнопки. Перелік цих властивостей наведено в таблиці нижче:
Властивості віджета Button
Дозволяє визначити, відключена чи кнопка, або змінити її стан. Відключеною кнопці відповідає значення true. Стан базового HTML-елемента ігнорується в jQuery UI
Дозволяє визначити, чи відображається текст кнопки, а також встановити або скасувати відображення тексту. Якщо значення icons одно false, то ця опція ігнорується
Дозволяє визначити, відображаються чи значки в тексті кнопки, а також задати відображаються значки або скасувати їх відображення
Дозволяє отримати або змінити текст кнопки
Описані опції можуть застосовуватися двома способами. Перший спосіб передбачає використання об'єкта відображення при виклику методу button (), як показано в прикладі нижче:
Тут властивість label використовується для вказівки тексту, який повинен відображатися на кнопці, а властивість disable - для відключення кнопки. Це відповідає стилю, з яким ви вже зустрічалися під час налаштування Ajax-запитів, і його слід дотримуватися при установці початкових конфігурацій віджетів.
В наведеному вище прикладі продемонстровано і другий спосіб, який використовується для отримання або завдання нових значень властивостей вже після створення екземпляра віджета. В даному випадку також викликається метод button (), але тепер з трьома аргументами. Перший аргумент - це ім'я методу option, другий - властивість, значення якого ви хочете змінити, а третій - нове значення, що привласнюється властивості. Тут для властивості disabled встановлюється значення false, яке замінює значення, встановлене перед цим за допомогою об'єкта відображення при створенні екземпляра віджета.
Обидві методики можуть об'єднуватися в одному виклику. В цьому випадку методу button () в якості першого аргументу передається метод option, а в якості другого об'єкт відображення. Це дозволяє вказати відразу кілька опцій при виклику методу button ():
Для читання значення параметра тут використовується все той же трохи "корявий" синтаксис. В даному випадку метод button () викликається з двома аргументами. Перший з них - метод option, а другий - властивість, яку потрібно отримати. Ця інструкція зчитує значення властивості disabled і виводить його на консоль:
Використання значків jQuery UI на кнопках
Теми jQuery UI включають ряд зображень у вигляді значків, які можна використовувати для будь-яких цілей, в тому числі для відображення на кнопках. Приклад використання значків на кнопках jQuery UI наведено в нижче:
Опція icons дозволяє вказати, які значки слід відображати. За допомогою міні Button для значків передбачені дві позиції. Властивості primary відповідає значок, розташований зліва від тексту, а властивості secondary - праворуч від тексту. Як показано в прикладі вище, для вказівки необхідних значків використовується об'єкт з властивостями primary і secondary. Будь-яке з цих властивостей може бути опущено, що призведе до відображення тільки одного значка. Розміри самих значків дуже малі, як показано на малюнку:
Значки ідентифікуються за допомогою класів, визначення яких містяться в CSS-файлі jQuery UI. Загальна кількість доступних значків становить 173 - занадто багато, щоб тут можна було привести їх повний список. Найпростіше вибрати потрібний значок, відвідавши сайт jqueryui.com. Виберіть сторінку Themes і перейдіть до її нижньої частини. Там ви побачите весь набір значків, представлений у вигляді таблиці. При наведенні покажчика миші на будь-якої значок відображається ім'я класу, яке відповідає даному значку:
Ім'я значка, що з'являється в підказці, починається з крапки (.), Яку при вказівці значка в опції icons слід опускати. Наприклад, якщо при наведенні покажчика миші на перший із значків відображається ім'я класу .ui-icon-caret-l-n, то для того, щоб використовувати на кнопці це зображення, у властивостях primary і secondary слід вказувати значення ui-icon-caret-l-n.
Застосування користувальницьких зображень
Через невеликого розміру значків jQuery UI я рідко використовую їх в своїх додатках. Для виведення інших зображень на кнопках jQuery UI існує кілька способів. Один з них полягає у вставці елемента img в той HTML-елемент button, про якого йдеться в інтерфейс jQuery UI. Кнопка jQuery UI належним чином враховує вміст базового елементу button, і якщо ви використовуєте зображення з прозорим фоном, то вам не потрібно піклуватися про те, щоб воно добре вписувалося в обрану вами тему оформлення.
Простий приклад цього наведено нижче:
Властивість text кнопки jQuery UI можна використовувати для скасування відображення вмісту базового елементу button тільки в тому випадку, якщо властивість icon має значення true. Якщо ж скасування відображення тексту кнопки потрібно в тому випадку, коли значки jQuery UI не використовуються, то для отримання необхідного результату слід використовувати метод text () jQuery і встановити з його допомогою порожній рядок в якості вмісту кнопки. Після цього досить викликати метод append () для вставки елемента img і метод button () для створення кнопки jQuery UI. Кінцевий результат представлений на малюнку:
Використання методів віджета Button
Крім властивостей, віджети jQuery UI мають також методи, які можна використовувати для управління віджетами після їх створення. Власне кажучи, вони не є істинними методами, оскільки їх виклик здійснюється дещо незвичним способом - шляхом передачі імені методу в якості аргументу методу button (), з чим ми вже стикалися раніше, коли змінювали значення властивостей кнопки за допомогою методу option. Проте ми будемо називати їх методами, оскільки саме така термінологія прийнята в jQuery UI.
Доступні методи разом з коротким описом їх призначення наведено в таблиці нижче:
Методи віджета Button
Метод destroy видаляє віджет jQuery UI з HTML-елемента, повертаючи його в початковий стан. Відповідний приклад наведено нижче:
У цьому прикладі за допомогою методу click () реєструється обробник клацання на кнопці. Зверніть увагу, що це не вимагає прийняття будь-яких спеціальних заходів у зв'язку з використанням jQuery UI. Усередині функції-обробника викликається метод destroy, так що клацання на кнопці призводить до того, що вона відключає саму себе.
Включення і відключення кнопки
Методи enable і disable дозволяють змінити стан кнопки jQuery UI, як показано в прикладі нижче:
У цьому сценарії в документ вставлений прапорець, і за допомогою методу change () зареєстрована функція, яка буде викликатися кожного разу при знятті або установці прапорця. Для зміни стану кнопки відповідно до стану прапорця використовуються методи enable і disable. Результат представлений на малюнках:
Оновлення стану кнопки jQuery UI
Метод refresh оновлює стан кнопки jQuery UI для обліку будь-яких можливих змін базового HTML-елемента. Цією можливістю зручно користуватися для відображення змін, що вносяться програмним шляхом, як показано в прикладі нижче:
У цьому прикладі прапорець використовується для управління додаванням і видаленням атрибута disabled з HTML-елемента button. Оскільки jQuery UI не забезпечує автоматичного виявлення цих змін, то для синхронізації станів використовується метод refresh.
Використання подій віджета Button
Крім властивостей і методів, для віджетів jQuery UI визначені події, які можна використовувати поряд з подіями, зв'язуваними з базовими елементами. Для віджету button визначено єдине подія create. яке відбувається в момент створення кнопки jQuery UI. Як і в разі інших методів, робота з подіями ведеться за допомогою шаблонних аргументів, переданих методом jQuery UI, в даному випадку - методом button ().
Приклад використання події create представлений нижче:
Тут подія create використовується для визначення функції, яка буде викликатися у відповідь на виконання клацання на кнопці. Я не відношу подія create до розряду особливо корисних, оскільки вважаю, що все те, що може бути виконано у відповідь на виникнення цієї події, можна реалізувати в рамках більш широкого підходу, що забезпечується jQuery.
Створення різних типів кнопок
Метод button () розрізняє види елементів, до яких він застосовується. Базове поведінку, відповідне поведінки звичайної кнопки, створюється при виклику методу button () для елементів button, a і input, атрибут type яких має одне зі значень submit, reset або button. Приклад перетворення всіх цих елементів в кнопки jQuery UI наведено нижче:
У цьому простому документі визначені всі вищезгадані елементи. Функція, передана методу click (), забезпечує перетворення кожного з елементів в відповідну кнопку jQuery UI при виконанні клацання на ньому. Результати такого перетворення представлені на малюнку:
Створення кнопки-перемикача
Викликавши метод button () для елемента input, типом якого є checkbox, ви отримаєте кнопку-перемикач. Ця кнопка може перебувати в двох станах - "включено" і "вимкнено" - і по черзі переходить з одного в інше при виконанні на ній клацань, слідуючи за зміною станів "відзначено" і "не відмічено" базового елементу-прапорця. Відповідний приклад наведено нижче:
Для створення кнопки jQuery UI на основі прапорця потрібно елемент input з відповідним елементом label, як показано в прикладі вище. Створювана кнопка-перемикач виглядає так само, як і звичайна кнопка jQuery UI, але по черзі переходить в одне з двох можливих станів при виконанні клацань на ній:
Не забувайте про те, що jQuery UI не змінює базові елементи, і тому вихідний елемент-прапорець зберігає свою функціональність, а його стан як і раніше контролюється атрибутом checked, як якщо б кошти jQuery UI були застосовані.
Створення групи перемикачів
Метод buttonset () дозволяє об'єднати ряд взаємозалежних перемикачів (радіокнопок, тобто елементів input з типом radio) в групу jQuery UI, як показано в прикладі нижче:
Зверніть увагу на те, що метод buttonset () викликається для попередньо обраного набору перемикачів (радіокнопок), що містяться в контейнерному елементі div. У даній ситуації ви не повинні викликати метод button () для кожного з елементів input окремо. Результат застосування методу buttonset () представлений на малюнку:
Як і у випадку звичайних перемикачів, в будь-який момент може бути обрана тільки одна кнопка, що дає можливість надати користувачеві фіксований набір варіантів вибору, стильове оформлення якого узгоджується з оформленням інших кнопок jQuery UI. Зауважте, що jQuery UI враховує той факт, що кнопки взаємопов'язані, застосовуючи до стику краях кнопок інший стиль оформлення, ніж до зовнішніх.
Створення групи звичайних кнопок jQuery UI
Метод buttonset () можна використовувати по відношенню до будь-яких інших елементів, до яких застосовується метод button (). Кінцевим результатом цього є застосування стилю групи перемикачів, але не поведінки, тому кожна кнопка буде працювати незалежно від інших. Приклад такого варіанту використання методу buttonset () представлений нижче:
В кнопку перетворюється будь-який відповідний елемент, що знаходиться всередині контейнера div, а стикуються краю кнопок стилизуются точно так же, як і в разі перемикачів, як показано на малюнку:
Обережно використовуйте цю методику. Характерний вид кнопок, об'єднаних в одну групу, може збивати користувача з пантелику, особливо якщо в іншому місці документа або веб-додатки є інша група кнопок, яка дійсно виконує функції перемикача.