jQuery UI — популярная JavaScript-библиотека для создания пользовательского интерфейса (UI — с англ. user interface) дизайнерами и разработчиками. Помогает создать на сайте дополнительные эффекты и виджеты (элементы управления — кнопки, диалоговые окошки и т.д.) Библиотека распространяется бесплатно и ее код является открытым для всех. Примеры выполненные при помощи библиотеки jQuery UI можно увидеть на странице http://jqueryui.com/demos/
jQuery UI и аналоги
Существует большое количество библиотек, помогающих вести разработку пользовательского интерфейса
- jQuery UI http://jqueryui.com
- Sencha Ext JS https://www.sencha.com/products/extjs/
- Bootstrap http://getbootstrap.com/
- jQuery Mobile http://jquerymobile.com/
- Zino UI Framework http://zinoui.com/
- jQuery EasyUI http://www.jeasyui.com/index.php
- jQWidjets http://www.jqwidgets.com/
- Kendo UI http://www.telerik.com/kendo-ui
jQuery UI — библиотека, помогающая изменять интерфейс веб-страниц, реализовывать интерактив в веб-приложениях. Возможности библиотеки описываются четырьмя блоками: взаимодействия (Interactions), виджеты/элементы управления (Widgets), эффекты (Effects), утилиты (Utilities). Каждый из блоков содержит список возможных применений.
Взаимодействия (Interactions) jQuery UI
Представляют набор
- Draggable/Перемещаемость — перетаскивать HTML-элементы мышкой
- Droppable/»Приземляемость» — назначить HTML-элемент, на который будет приземляться перетаскиваемый элемент
- Resizable/Изменение размера — изменяет размер HTML-элемента при помощи мыши
- Selectable/Выделяемость — использует мышь для выделения элемента или группы элементов
- Sortable/Сортируемость — позволяет сортировать элементы на странице
Виджеты/элементы управления (Widgets) jQuery UI
Представляют набор
- Accordion/Аккордеон — набор схлопывающихся элементов
- Autocomplete/Автозавершение — автодополнение ввода по первым символам
- Button/Кнопка — кнопки на странице
- Datepicker/Календарь — выбор даты из календаря
- Dialog/Диалоговое окно — создание диалоговых окон
- Menu/Меню — выпадающее меню
- Progressbar/Индикатор загрузки — указание степени выполнения некоторого процесса
- Selectmenu/Аналог HTML-элемента select — расширяет функциональность базового HTML-элемента
- Slider/Ползунок — выбор числа при помощи ползунка
- Spinner/Стрелки в поле ввода — для изменения значений в текстовом поле ввода
- Tabs/Вкладки — организация вкладок на странице
- Tooltip/Подсказки — организация всплывающих подсказок
Эффекты (Effects) jQuery UI
Представляют набор
- Add Class/Добавление класса — добавляет CSS-класс элементу
- Color Animation/Анимация цвета — расширение анимации jQuery
- Easing/Скорость анимации — изменение темпа анимации
- Effect/Эффекты — анимационные эффекты
- Hide/Сокрытие — сокрытие элемента с использованием анимационных эффектов
- Remove Class/Удаление класса — Удаление CSS-класса
- Show/Показ — появление элемента с использованием анимационных эффектов
- Switch Class/Переключатель класса — поочередно включает один и второй классы
- Toggle/Переключатель — поочередно отображает и прячет элемент с использованием анимационных эффектов
- Toggle Class/Переключатель класса — поочередно добавляет и удаляет класс из элемента (в отличие от Switch Class работает с одним классом)
Утилиты (Utilities) jQuery UI
Представляют набор
- Position/Позиционирование — управление позиционированием элемента относительно документа, окна браузера, других элементов
- Widget Factory/Фабрика виджетов — позволяет использовать все виджеты jQuery UI на странице
Загрузка и установка jQuery UI
Загрузить библиотеку можно с сайта разработчиков http://jqueryui.com/, со страницы http://jqueryui.com/download/ (предварительно выбрав набор нужных компонентов jQuery UI), CDN-хранилища сторонних сайтов (https://tech.yandex.ru/jslibs/, https://developers.google.com/speed/libraries/). В любом случае нужно прописать элементы link и script, чтобы были подключены стили библиотеки и ее JavaScript-код.
Пример подключения
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Оформление jQuery UI
Для оформления библиотеки можно использовать один из готовых наборов (тем) или сформировать свое оформление на странице оформителя тем (ThemeRoller). Созданная/скачанная тема будет представлять собой папку с CSS, которую будет нужно разместить рядом с основным кодом библиотеки. Не забудьте проверить адрес подключения новых стилей в link