jQuery UI

jQuery UI — это библиотека пользовательских интерфейсов, построенная поверх jQuery, предназначенная для упрощения создания интерактивных веб-приложений. Она предоставляет готовые виджеты, эффекты, темы и инструменты для взаимодействия с элементами страницы.

Основной принцип работы jQuery UI заключается в расширении возможностей стандартного jQuery. Любой элемент DOM может быть превращён в интерактивный виджет с минимальными усилиями.

Подключение jQuery UI

Для работы с библиотекой необходимо подключить сам jQuery, а затем jQuery UI. Обычно это делается через CDN:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Подключение CSS важно для корректного отображения виджетов и эффектов. jQuery UI поддерживает кастомизацию через ThemeRoller, позволяя создавать собственные цветовые схемы и стили.

Виджеты

jQuery UI предоставляет набор готовых виджетов для стандартных элементов интерфейса:

Календарь (Datepicker)

Используется для выбора даты. Подключение и инициализация минимальны:

$("#datepicker").datepicker({
    dateFormat: "dd-mm-yy",
    showAnim: "slideDown"
});

Ключевые параметры:

  • dateFormat — формат даты;
  • showAnim — анимация появления календаря;
  • minDate и maxDate — ограничение диапазона выбора.

Диалоговое окно (Dialog)

Диалог позволяет создавать модальные окна с содержимым.

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "Сохранить": function() { $(this).dialog("close"); },
        "Отмена": function() { $(this).dialog("close"); }
    }
});

Методы и опции:

  • autoOpen — автоматическое открытие;
  • modal — блокировка фона;
  • buttons — объект кнопок с функциями;
  • Методы: .dialog("open"), .dialog("close"), .dialog("destroy").

Вкладки (Tabs)

Вкладки упрощают организацию содержимого:

$("#tabs").tabs({
    collapsible: true,
    active: 0
});

Опции:

  • active — активная вкладка;
  • collapsible — возможность закрытия всех вкладок;
  • Методы: .tabs("option", "active", 2) для изменения активной вкладки.

Аккордеон (Accordion)

Позволяет создавать вертикальные панели с разворачиваемыми секциями:

$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true
});

Ключевые свойства:

  • heightStyle — способ расчёта высоты секций (auto, fill, content);
  • collapsible — позволяет сворачивать все секции;
  • Методы: .accordion("option", "active", 1).

Эффекты

jQuery UI добавляет анимационные эффекты, расширяя стандартные возможности jQuery:

  • show() и hide() с эффектами (fade, slide, blind, bounce);
  • toggle() с анимацией;
  • addClass(), removeClass() и switchClass() для анимированного изменения стилей.

Пример анимированного скрытия элемента:

$("#box").hide("explode", { pieces: 16 }, 1000);

Параметры:

  • Тип эффекта (explode, bounce, slide и др.);
  • Настройка эффекта (pieces, distance, times);
  • Продолжительность анимации в миллисекундах.

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

jQuery UI добавляет возможности drag & drop, сортировки и масштабирования элементов.

Перетаскивание (Draggable)

Позволяет элементам перемещаться мышью:

$("#drag").draggable({
    containment: "#container",
    cursor: "move"
});

Параметры:

  • containment — ограничение области перемещения;
  • axis — ограничение по оси (x или y);
  • handle — элемент, который инициирует перетаскивание.

Перетаскивание и отпускание (Droppable)

Позволяет реагировать на отпускание элементов:

$("#dropzone").droppable({
    accept: "#drag",
    drop: function(event, ui) {
        $(this).addClass("highlight");
    }
});

Ключевые опции:

  • accept — селектор элементов, которые можно бросать;
  • hoverClass — класс при наведении перетаскиваемого объекта;
  • Колбэк drop с объектами event и ui.

Сортировка (Sortable)

Позволяет упорядочивать элементы списка:

$("#sortable").sortable({
    placeholder: "ui-state-highlight",
    axis: "y"
});

Особенности:

  • placeholder — класс для визуального места перемещения;
  • axis — ограничение оси;
  • Методы: .sortable("toArray") для получения порядка элементов.

Масштабирование и изменение размера (Resizable)

Элемент можно растягивать:

$("#resizable").resizable({
    handles: "n, e, s, w",
    minWidth: 100,
    maxHeight: 300
});

Параметры:

  • handles — стороны для изменения размера;
  • minWidth, minHeight, maxWidth, maxHeight — ограничения;
  • События: start, resize, stop.

Темизация и кастомизация

jQuery UI использует ThemeRoller для создания собственных тем. Структура CSS классов стандартная:

  • .ui-widget — общий стиль виджетов;
  • .ui-state-default — базовое состояние элемента;
  • .ui-state-hover — при наведении;
  • .ui-state-active — активный элемент;
  • .ui-widget-content и .ui-widget-header — контейнеры и заголовки.

Темы можно подключать как отдельный CSS или комбинировать с кастомными стилями для уникального интерфейса.

jQuery UI сочетает в себе готовые решения для интерактивности и гибкость кастомизации. Она позволяет создавать сложные интерфейсы с минимальными усилиями, упрощая работу с DOM, событиями и визуальными эффектами.

Оглавление