jQuery UI

jQuery UI

jQuery UI помогает сайту

JavaScript-библиотека jQuery UI помогает улучшать пользовательский интерфейс

jQuery UI — популярная JavaScript-библиотека для создания пользовательского интерфейса (UI — с англ. user interface) дизайнерами и разработчиками. Помогает создать на сайте дополнительные эффекты и виджеты (элементы управления — кнопки, диалоговые окошки и т.д.) Библиотека распространяется бесплатно и ее код является открытым для всех. Примеры выполненные при помощи библиотеки jQuery UI можно увидеть на странице http://jqueryui.com/demos/

jQuery UI и аналоги

Существует большое количество библиотек, помогающих вести разработку пользовательского интерфейса

 jQuery UI Dialogs - Диалоговые окна

jQuery UI Dialogs — Диалоговые окна

jQuery UI — библиотека, помогающая изменять интерфейс веб-страниц, реализовывать интерактив в веб-приложениях. Возможности библиотеки описываются четырьмя блоками: взаимодействия (Interactions), виджеты/элементы управления (Widgets), эффекты (Effects), утилиты (Utilities). Каждый из блоков содержит список возможных применений.

Взаимодействия (Interactions) jQuery UI

Представляют набор

  • Draggable/Перемещаемость — перетаскивать HTML-элементы мышкой
  • Droppable/»Приземляемость» — назначить HTML-элемент, на который будет приземляться перетаскиваемый элемент
  • Resizable/Изменение размера — изменяет размер HTML-элемента при помощи мыши
  • Selectable/Выделяемость — использует мышь для выделения элемента или группы  элементов
  • Sortable/Сортируемость — позволяет сортировать элементы на странице

Виджеты/элементы управления (Widgets) jQuery UI

 jQuery UI Tabs- Вкладки

jQuery UI Tabs- Вкладки

Представляют набор

  • Accordion/Аккордеон — набор схлопывающихся элементов
  • Autocomplete/Автозавершение — автодополнение ввода по первым символам
  • Button/Кнопка — кнопки на странице
  • Datepicker/Календарь — выбор даты из календаря
  • Dialog/Диалоговое окно — создание диалоговых окон
  • Menu/Меню — выпадающее меню
  • Progressbar/Индикатор загрузки — указание степени выполнения некоторого процесса
  • Selectmenu/Аналог HTML-элемента select — расширяет функциональность базового HTML-элемента
  • Slider/Ползунок — выбор числа при помощи ползунка
  • Spinner/Стрелки в поле ввода — для изменения значений в текстовом поле ввода
  • Tabs/Вкладки — организация вкладок на странице
  • Tooltip/Подсказки — организация всплывающих подсказок
jQuery UI Datepicker

Элемент управления jQuery UI Datepicker

Эффекты (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


Об авторе

@altarasov administrator

Вы должны быть авторизованы, чтобы оставить комментарий.