Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Створюємо Windows-подібний інтерфейс за допомогою jQuery UI

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Ви коли-небудь хотіли створити інтерактивний користувацький інтерфейс (* сукупність усіх засобів, наданих розробником користувачу комп'ютерної системи для взаємодії з нею. Зазвичай містить різноманітні комбінації меню, клавіатурні команди, організацію вікон на екрані, систему підказок, екранні кнопки для роботи з мишею, розпізнавання мовних команд тощо. Тут і надалі примітка перекладача) для вашого застосунку, але не знали як? У цьому посібнику ми швидко та легко створимо Windows-подібний інтерфейс, скориставшись jQuery UI, бібліотекою готових компонентів для користувацького інтерфейсу, розробленою на основі jQuery.


Що саме з себе становить jQuery UI?

jQuery UI

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

jQuery UI завжди була відмінним інструментом у наборі  фронтенд-розробника. Вона пропонує велику кількість віджетів та ефектів, які були чудово сплановані таким чином, щоб працювати у більшості браузерів. Вам потрібен швидкий спосіб створення забезпеченого  закладками інтерфейсу? В jQuery UI є для цього готове рішення! Хочете створити модальне вікно (* блокує взаємодію користувача з додатком, що ініціює діалог; дочірнє вікно для взаємодії користувача із застосуванням: воно служить для отримання інформації від додатка або для вводу запитуваних даних та вибору опцій; тому модальне вікно часто називають діалоговим (dialog box , modal dialog). Якщо відкривається модальне вікно, то повернення керування застосуванню може відбутися тільки після реакції користувача)? І для цього є готове рішення!

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

Примітка: якщо ви дійсно зочете налаштувати всі можливі властивості теми jQuery UI, то вам варто ознайомитися з цим посібником під назвою «A Massive Guide to Custom Theming jQuery UI Widgets» (* «Вичерпний посібник з налаштування теми віджетів jQuery UI»). Доступ до нього мають тільки члени рівня Premium, проте я ручаюся, що він того вартий!


Наша ціль: створити Windows-подібні діалогові вікна з підтримкою перетаскування, зміни розміру, згортання та розгортання, які ми можемо застосувати для різноманітних видів додатків.

windows-like interface example from Aralista!
Windows-подібний інтерфейс на прикладі Aralista!

Зображення надано з люб'язного дозволу http://aralista.com


Крок 1: Встановлення

Для початку завантажте бібліотеку jQuery UI з її сайту http://jqueryui.com. Як відвідаєте сайт, то побачите безліч опцій для «налаштування» вашого завантаження jQuery UI.

The jQuery UI Download Page
Сторінка завантаження jQuery UI

Для досягнення цілей нашого посібника потрібно, щоб були вибрані всі компоненти. Стосовно теми, виберіть Flick. Перепровірте також, що ви вибираєте версію 1.8.16, оскільки на сторінці завантаження jQuery UI пропонується й застаріла версія (* застарілий стабільний випуск, доступний досі (і, вірогідно, підтримуваний); може бути необхіден комусь (наприклад, залежності плаґіна можуть не працювати з новим випуском)) для більш ранніх випусків jQuery.

Також в архіві повинна буде міститися бібліотека jQuery версії 1.6.2. Якщо ви використовуєте більш сучасну версію jQuery, то вам слід використовувати її. Згадана версія – просто мінімальна версія jQuery, що потрібна для jQuery UI.

Витягніть вміст до публічної папки (* папка, що створена для обміну інформацією з іншими користувачами) вашого проекту. Після витягнення ресурси для вашого сайту будуть певним чином структуровані:

Suggested file-structure for your site resources
Запропонована файлова структура для ресурсів вашого сайту
  • папка js призначена для розміщення ваших файлів JavaScript (jQuery UI та jQuery)
  • папка css призначена для розміщення ваших файлів CSS (CSS для теми jQuery UI)

Ви запросто можете змінити цю структуру згідно з вашими вимогами, хоча, виходячи з мого досвіду, подібне структурування файлів – відмінний спосіб організації ресурсів вашого сайту.

Після витягнення фалів створіть файл index.html, в якому буде міститися код HTML нашої сторінки. Нижче наведено його вміст:


Крок 2: Пишемо код для наших діалогових вікон

Отже, давайте почнемо з написання HTML для наших готових вікон. Згідно зі сторінкою документації про Dialog на сайті jQuery UI HTML вікна Dialog – це просто <div>. Будь-який інший код HTML всередині <div> становиться контентом діалогового вікна. Знаючи це, створіть просте вікно Dialog та відкрийте його за допомогою jQuery UI.

Скопіюйте наступний код до <body> файлу з HTML:

Потім ініціалізуйте вікно Dialog, виконавши наступний код JavaScript:  Скопіюйте наступний код до <head> файлу з HTML:

Одразу після оновлення сторінки ви повинні побачити дещо подібне:

Hello World!

«Hello World» (* перша найпростіша програма, яку створюють початківці в області комп'ютерних наук)

Ініціалізація (* етап задання початкового стану) вікна Dialog може бути виконана просто шляхом виклику функції $(element_id).dialog()! І як ви розумієте, наш контент всередині <div> буде виступати вмістом діалогового вікна.

Тепер додайте просту форму для створення нових вікон Dialog у наявному в нас вікні Dialog. Замініть код «Hello World!» всередині нашого первісного вікна Dialog наступним:

Після оновлення сторінки ви повинні побачити дещо подібне:

Looks ugly :(

Поки що воно виглядає застрашливо, проте не хвилюйтеся, ми будемо вносити деякі зміни для вікна Dialog, щоб зробити його більш привабливим.


Крок 3: Налаштовуємо наші вікна Dialog за допомогою опцій Dialog та CSS

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

Давайте замінемо наш код для ініціалізації наступним:

Також давайте додамо деякі правила CSS до <head> нашого HTML:

Much better!

Так набагато краще!

Давайте проаналізуємо деякі опції, що ми використовуємо в нашому коді для ініціалізації:

  • width – завдяки цій опції ви можете задати певне значення ширини для вашого вікна Dialog. Також ви можете встановити її значенням  'auto', щоб дозволити jQuery UI встановлювати значення ширини динамічно.
  • height – по суті робить те ж саме, що й опція width, але для висоти вікна Dialog, а не для ширини.

Є ще багато опцій для вікна Dialog, проте більшість із них використовується для керування поведінкою вікна Dialog. Ми розглянемо деякі з них у наступних кроках цього посібника.

Тепер, коли в нас є миловидне вікно Dialog з елементами форми всередині, давайте додамо деякі кнопки до нашого вікна Dialog для виконання яких-небудь дій!


Крок 4:  Додаємо Button для відкриття нашого вікна Dialog

Одна із чудових особливостей jQuery UI – те, що її  розроблено згідно з принципом модульності (* організація програми у вигляді написаних за певними правилами взаємодіючих частин - модулів). Наприклад, вікно Dialog також використовує інші компоненти jQuery UI, як то: Draggable, Resizable і, що найбільш важливо, Button.

Button example from jQuery UI's documentation

Приклад кнопок із документації з jQuery UI

Компонент Button дозволяє вам створювати кнопки, при клацанні яких виконуються користувальницькі функції. І водночас він відповідає темі, яку ви встановили разом із  jQuery UI, так що при зміні теми буде змінюватися й вигляд кнопок, завдяки чому в межах всього сайту буде підтримуватися однаковий дизайн.

Для початку давайте створимо Button для відкриття та закриття нашого вікна Dialog. Додайте наступний код до <body> HTML:

І ініціалізуємо його, додавши до функції $(document).ready() наступний код:

Cool button bro

Наш крутий приятель, кнопка

Оскільки ми займаємося кнопками, давайте також перебудуємо й наші прапорці, щоб вони краще виглядали. Компонент Button jQuery UI також дозволяє нам перетворити набір прапорців або перемикачів до Buttonset. Для цього просто скопіюйте наступний код до вашого блока з кодом JavaScript:

Тепер оновіть сторінку, щоб побачити нові покращені прапорці:

Cool checkboxes bro

Тепер, коли вікна Dialog та Button виглядають добре, ми можемо змінити їх поведінку таким чином, що при їх натисканні буде відкриватися та закриватися Dialog. Для цього оновіть блок коду з JavaScript, щоб він виглядав наступним чином:

Давайте пройдемося по коду рядок за рядком:

  • Ми додали обробник події click для нашої кнопки, завдяки якому при її натисканні відкривається вікно Dialog.
  • Також ми використовуємо метод $(dialog_id).dialog('isOpen'), що повертає true, якщо Dialog вже відкрито, та false, якщо ні.
  • Якщо вікно Dialog закрито, то ми його відкриваємо за допомогою методу  $(dialog_id).dialog('open') та змінюємо мітку Button на “Close window” завдяки методу $(button_id).button('option').
  • Якщо воно вже відкрито, то ми робимо навпаки, використовуючи той же самий метод option для Button та  метод $(dialog_id).dialog('close') для закриття вікна Dialog.
  • Також ми скористалися іншою опцією Dialog під назвою autoOpen. Якщо її значення –  true, то з'являються можливість  відкриття вікна Dialog автоматично після його ініціалізації. Інакше вікно Dialog може бути відкрито тільки за допомогою виклику методу $(dialog_id).dialog('open'), що й відбувається при клацанні кнопки.
Functional buttons and checkboxes bro

Наші приятелі, функціональні кнопки та прапорці


Крок 5: Додаємо функціональні можливості для нашого вікна Dialog

Тепер, коли вікно Dialog готово до роботи, давайте додамо для нього функціональну можливість створення нових вікон Dialog.  Спочатку додамо деякі кнопки до нашого вікна Dialog. На щастя, в jQuery UI є функціональна можливість додавання кнопок до будь-якого вікна Dialog та налаштування виконуваних при клацанні функцій. Для цього додайте до коду для ініціалізації параметр buttons:

Як ви бачите з прикладу вище, ми додали кнопку “Create” просто завдяки додаванню опції buttons до коду для ініціалізації. Опція buttons – це масив об'єктів JSON наступного формату:

Для того, щоб додати більше кнопок, ви можете просто додати більше об'єктів JSON того ж формату до масиву buttons. Після оновлення сторінки ви повинні побачити дещо подібне:

Yay, clicked the button!

Так, кнопку натиснуто!

Тепер ми додамо деякі функціональні можливості для нашої кнопки. Видаліть рядок alert('Yay, clicked the button!'); та замініть його наступним кодом:

Нижче наведено послідовне пояснення тільки-но доданого нами коду:

  • Спочатку отримуємо загальну кількість вікон Dialog на сайті.
  • На основі неї генеруємо новий унікальний id, що буде використовуватися для нового вікна Dialog.
  • Отримуємо значення полів window Title та window Content з форми “Create a new Dialog window”.
  • Перевіряємо, чи відмічені кнопки-прапорці ALERT та  CLOSE. Якщо відмічені, то створюємо об'єкт JSON згідно з форматом для кнопок, наведеним вище, і додаємо його до масиву buttons.
  • Створюємо та додаємо код HTML вікна Dialog всередину тегу <body> сторінки.
  • Нарешті, ініціалізуємо нове вікно Dialog за допомогою коду для ініціалізації, подібно тому, що використовували для оригінального вікна Dialog .

Поекспериментуйте з ним та спробуйте задати різноманітні комбінації кнопок. Нижче наводиться скриншот із усіма можливими комбінаціями:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet (* назва тимчасового тексту, який дизайнер додає замість головного до макету сторінки, щоб зосередитися на графічних елементах зверстаного листа).

Тепер, коли в нас є можливість створювати велику кількість вікон, давайте додамо деяку підтримку згортання/розгортання!


Крок 6: Додаємо для вікон Dialog можливість згортання та розгортання

Нажаль, в jQuery UI нема вбудованих методів minimize та maximize, проте ми можемо запросто їх додати, переписавши деякий код для ініціалізації прототипу Dialog jQuery UI. По суті, ми додаємо деякий код для виконання після ініціалізації, завдяки якому автоматично буде створено вікно в мінімізованому стані, додано піктограму для виконання мінімізації вікон Dialog, а також додано функцію, завдяки якій буде виконуватися розгортання мінімізованого вікна при натисканні вікна в мінімізованому стані.

Давайте почнемо з додавання CSS для задання стильового оформлення кнопок та вікон у мінімізованому стані:

Також нам потрібно додати контейнер для вікон у мінімізованому стані, до якого будемо додавати всі мінімізовані вікна. Додайте цей код до тегу <body>:

Тепер додайте цей блок коду JavaScript після того міста, що завантажується бібліотека jQuery UI. Це важливо, оскільки цей код на спрацює, якщо буде розташований до завантаження бібліотеки.

Нижче пояснюється, що відбувається в цьому коді:

  • дозволяємо виконуватися оригінальному коду ініціалізації Dialog jQuery за допомогою _init.apply(this, arguments);
  • додаємо іконку для виконання мінімізації до рядка заголовка вікна Dialog;
  • додаємо код HTML для вікна в мінімізованому стані всередину <div> з id #dialog_window_minimized_container;
  • додаємо обробник hover до піктограми для виконання мінімізації, завдяки чому для неї буде застосовано клас ui-state-hover, коли курсор буде знаходитися поверх неї, завдяки чому буде додано спостерігаємий нами ефект «зміни кольору фону»;
  • створюємо обробник click для неї, завдяки якому вікно Dialog зачиняється та показується вікно в мінімізованому стані;
  • нарешті, створюємо інший обробник click для вікна в мінімізованому стані, завдяки якому само це вікно закривається та повторно відкривається вікно Dialog;

І тепер наш Windows-подібний інтерфейс готовий!

windows-like interface, hurrah!

Windows-подібний інтерфейс, ура-а-а!


Завершення

У цьому посібнику ми продемонстрували, як просто створити чудовий користувацький інтерфейс з широкими можливостями, використовуючи лише jQuery та jQuery UI. Зараз ви вже повинні розуміти, як:

  • завантажити та встановити бібліотеку jQuery UI для вашого проекту
  • скористатися компонентами jQuery UI:  Dialog, Button та  Buttonset
  • створити діалогові вікна як статично, так і динамічно за допомогою інформації з будь-якого джерела
  • динамічно створити різноманітні кнопки для кожного нового діалогового вікна
  • додати користувальницькі можливості до Dialog jQuery UI, наприклад, згортання та розгортання вікна
  • налаштувати процес ініціалізації jQuery UI

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

Чи використовували ви jQuery UI в минулому або плануєте використовувати в майбутньому проекті? Дайте нам знати в коментарях нижче, і велике вам спасибі за проявлену зацікавленість!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.