Бібліотека jQuery UI. Установка та налаштування

36

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

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

Ви можете завантажити весь пакет цілком, так і вибрати якийсь один або декілька віджетів. Також в комплекті бібліотеки jQuery UI є два десятка тем оформлення практично на будь-який смак. Це також істотний плюс.

Перейдемо від слів до справи: скачаємо і встановимо бібліотеку jQuery UI. Перейдемо на офіційний сайт і звернемося до розділу Download. Саме тут ми можемо вибрати компоненти для скачування і тему.

Библиотека jQuery UI. Установка и настройка

Тему можна вибрати з випадаючого списку внизу сторінки.

Библиотека jQuery UI. Установка и настройка

Також при бажанні можна сконструювати свою тему з власним оформленням, для цього достатньо клікнути по посиланню design a custom theme, яка знаходиться одразу над випадаючим списком. На сторінці, що відкрилася, ми можемо змінювати шрифти, кольори та інше оформлення елементів, спостерігаючи зміни в режимі онлайн, загалом, можемо конструювати власну тему.

Библиотека jQuery UI. Установка и настройка

Але повернемося на попередню сторінку і завантажити всі компоненти бібліотеки jQuery UI з темою Base.

Библиотека jQuery UI. Установка и настройка

В отриманому архіві нам потрібно файл стилів (jquery-ui.css) і файл скриптів (jquery-ui.js). Обидва файлу пропонуються у звичайній і стислій версіях, тому можна вибрати будь-який. Ну і, само собою, потрібно бібліотека jQuery, я підключу версію 1.11.3 з сервісу Google.

У підсумку сторінка зі всіма з’єднаннями буде виглядати наступним чином:

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