Книга: JavaScript. Подробное руководство, 6-е издание

19.10. Библиотека jQuery Ul

19.10. Библиотека jQuery Ul

Функциональные возможности, поддерживаемые библиотекой jQuery, сосредоточены на методах для работы с деревом DOM, стилями CSS, обработчиками событий и поддержки архитектуры Ajax. Все вместе это является отличным фундаментом для построения высокоуровневых абстракций, таких как виджеты пользовательского интерфейса, которые предоставляет библиотека jQuery UI. Полный охват возможностей библиотеки jQuery UI выходит далеко за рамки этой книги, и все, что нам доступно, - это краткий обзор. Саму библиотеку и документацию к ней можно найти на сайте http://jqueryui.com.

Как следует из ее имени, библиотека jQuery UI определяет множество виджетов пользовательского интерфейса: поля ввода с функцией автодополнения, элементы выбора даты, многостраничные виджеты и вкладки для организации информации, движки и индикаторы хода выполнения операции для визуального представления числовых значений и модальные диалоги для срочного оповещения пользователя. В дополнение к этим виджетам библиотека jQuery UI реализует более универсальные «механизмы взаимодействий», позволяющие легко сделать любой элемент документа буксируемым, изменяющим размеры, выбираемым или сортируемым. Наконец, библиотека jQuery UI определяет множество новых методов визуальных эффектов (включая возможность изменять цвет) вдобавок к тем, что предлагаются самой библиотекой jQuery, и добавляет множество новых функций переходов.

Библиотеку jQuery UI можно представить как пакет расширений для библиотеки jQuery, помещенных в один файл. Чтобы воспользоваться библиотекой jQuery UI, достаточно просто подключить ее к веб-странице после подключения основной библиотеки jQuery. На странице Download (Загрузка), на сайте http://jqueryui.com, можно выбрать компоненты, которые предполагается использовать, и сконструировать собственную версию библиотеки, что поможет вам сократить время загрузки ваших страниц в сравнении со случаем использования полной версии библиотеки jQuery UI.

Библиотека jQuery UI поддерживает темы оформления, которые реализуются в виде файлов CSS. То есть помимо загрузки в ваши страницы программного кода библиотеки jQuery UI вам также придется подключить файл CSS с выбранной темой оформления. На сайте библиотеки jQuery UI имеется множество готовых тем оформления, а также страница «ThemeRoller», позволяющая настраивать и загружать собственные темы оформления.

Виджеты и механизмы взаимодействий в библиотеке jQuery UI оформлены в виде расширений, каждое из которых определяет единственный метод объекта jQuery. Обычно, когда такие методы применяются к существующим элементам документа, они преобразуют эти элементы в виджеты. Например, чтобы превратить текстовое поле ввода в виджет выбора даты, при щелчке на котором отображается календарик, достаточно просто вызвать метод datepicker(), как показано ниже:

// Превратить элементы <input> с атрибутом в виджеты выбора даты
$("input.date").datepicker();

Для полноценного использования виджета из библиотеки jQuery UI необходимо знать три вещи: его параметры настройки, его методы и его события. Все виджеты в библиотеке jQuery UI являются настраиваемыми, и некоторые из них имеют весьма значительное количество настроек. Поведение и внешний вид виджетов можно настраивать, передавая объект с параметрами (подобный объекту с параметрами, который передается методу animate()) методу виджета.

Виджеты в библиотеке jQuery UI обычно определяют хотя бы несколько «методов» взаимодействия с виджетом. Однако, чтобы избежать быстрого роста количества методов объекта jQuery, виджеты в библиотеке jQuery UI определяют свои «методы» не как настоящие методы. Каждый виджет имеет всего один метод (такой как метод datepicker() в примере выше). Когда необходимо вызвать «метод» виджета, имя требуемого «метода» передается единственному настоящему методу, определяемому виджетом. Например, чтобы перевести виджет выбора даты в состояние запрещения, не нужно вызывать его метод disableDatepicker(); вместо этого нужно вызвать datepicker("disable").

Как правило, виджеты в библиотеке jQuery UI определяют собственные события, которые генерируются в ответ на действия пользователя. Установить обработчики этих событий можно с помощью обычного метода bind() или с помощью свойств обработчиков событий объекта с параметрами, который передается методу виджета. В первом аргументе этим обработчикам, как обычно, передается объект Event. Некоторые виджеты во втором аргументе передают обработчикам объект «пользовательского интерфейса». Этот объект, как правило, хранит информацию о состоянии виджета.

Обратите внимание, что в документации к библиотеке jQuery UI иногда описываются «события», которые не являются настоящими событиями и являются скорее функциями обратного вызова, которые устанавливаются посредством объекта с параметрами настройки. Например, виджет выбора даты поддерживает несколько функций обратного вызова, которые вызываются им в различных ситуациях. Однако ни одна из этих функций не имеет сигнатуры, свойственной стандартным обработчикам событий, и обработчики этих «событий» нельзя зарегистрировать с помощью метода bind(). Вместо этого соответствующие функции обратного вызова необходимо указывать при настройке виджета в первом вызове метода datepicker().

Оглавление книги