Бібліотека jQuery UI. Віджет dialog

32

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося, як встановити та налаштувати віджет dialog (діалог), який дозволяє швидко створювати модальні вікна (діалогові вікна).

Модальні вікна – штука вже досить давня у вебі. Однак, модальні вікна досі активно використовуються і не втратили своєї актуальності. В першу чергу завдяки привабливості і компактності: відвідувачам подобаються спливаючі вікна, ну а розробнику вони дозволяють розмістити більший обсяг даних на сторінці компактніше. Наприклад, ми цілком можемо приховати на сторінці форму авторизації або реєстрації, яку покажемо потім у модальному вікні. Це може бути не обов’язково форма, а будь-які інші дані, які будуть показані в діалоговому вікні при натисканні на кнопку або посилання.

Плагін dialog бібліотеки jQuery UI дозволяє швидко створювати діалогові вікна для вашої сторінки. Давайте на простому прикладі розглянемо створення діалогового вікна, яке буде показане при кліку по кнопці.

Отже, для початку створимо якийсь блок з даними:

Це діалогове вікно…

Поки що нічого особливого, текст блоку не прихований і прекрасно видний на сторінці. Тепер спробуємо використати для цього блоку метод плагіна – dialog():

$(function(){
$(‘#dialog’).dialog();
});

Библиотека jQuery UI. Виджет dialog

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

Це добре, але не зовсім те, що ми хотіли, оскільки вікно показується відразу ж після завантаження сторінки. Нам же потрібно, щоб вікно було приховано і показувалося при натисканні кнопки.

Для реалізації задуманого необхідно налаштувати модальне вікно, використовуючи API плагіна dialog. Зокрема, нам потрібно налаштування autoOpen зі значенням false:

$(‘#dialog’).dialog({
autoOpen: false
});

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

Відкрити вікно

Библиотека jQuery UI. Виджет dialog

Після цього залишається відстежити подію клацання по цій кнопці і викликати при настанні події метод dialog з параметром open:

$(‘#open’).click(function(){
$(‘#dialog’).dialog(‘open’);
});

Библиотека jQuery UI. Виджет dialog

Ось тепер вікно буде з’являтися при кліку по кнопці. Зверніть увагу, відкриття і закриття модального вікна відбувається досить буденно, без ефектів. Але це легко виправити, при цьому ми можемо використовувати як стандартні ефекти jQuery, так і ефекти бібліотеки jQuery UI, яких достатньо велика кількість. Але з ефектами jQuery UI ми познайомимося вже в наступній статті.

Ну а поки що все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!