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

Флэнаган Дэвид
Шрифт:

Расширения могут определять новые вспомогательные функции, добавляя их в сам объект

jQuery
. Например:

// Этот метод выводит свои аргументы (с помощью метода расширения println)

// в элемент с атрибутом id= "debug". Если такой элемент отсутствует, он будет

// создан и добавлен в документ.

jQuery.debug = function {

var elt = jQuery("#debug"); // Отыскать элемент #debug

if (elt.length == 0) { // Создать, если он отсутствует

elt = jQuery("<div id='debug'><h1>Debugging Output</h1></div>");

jQuery(document.body). append(elt);

}

elt.println.apply(elt, arguments); // Вывести в него аргументы

};

Помимо создания новых методов можно также расширять и другие части библиотеки jQuery. В разделе 19.5, например, мы узнали, что имеется возможность добавлять новые имена, определяющие продолжительность визуальных эффектов (вдобавок к «fast» и «slow»), создавая новые свойства в объекте

jQuery.fx.speeds
, и добавлять новые функции переходов, включая их в объект
jQuery.easing
. Более того, с помощью расширений можно даже добавлять новые возможности в механизм селекторов библиотеки jQuery! Например, можно определить новые псевдоклассы фильтров (такие как
:first
и
:input
), добавив свойства в объект
jQuery. ехрг[':'].
Ниже приводится пример определения нового фильтра
:draggable
, который возвращает только элементы с атрибутом
draggable=true
:

jQuery.expr[draggable = function(e) { return e.draggable === true; };

Добавив этот фильтр, мы сможем выбирать доступные для буксировки изображения вызовом

$("img:draggable")
вместо более длинного
$("img[draggable=true]")
.

Как можно заметить в примере выше, функции фильтра передается элемент DOM - кандидат на выбор. Она должна вернуть true, если элемент соответствует фильтру, и false - в противном случае. Многие нестандартным фильтрам достаточно одного аргумента с элементом, но в действительности им передается четыре аргумента. Во втором аргументе передается целочисленный индекс, определяющий позицию элемента в массиве кандидатов. Этот массив передается в четвертом аргументе, но ваша функция фильтра не должна модифицировать его. В третьем аргументе передается весьма интересное значение: это массив результатов вызова метода

.ехес
объекта
RegExp
. В четвертом элементе этого массива (с индексом 3) хранится значение, переданное псевдоклассу фильтра в круглых скобках (если оно имеется). Из этого значения удаляются все скобки и кавычки, и остается только строка. Например, ниже показано, как можно было бы реализовать псевдокласс
:data(x)
, возвращающий true только для элементов, имеющих атрибут
data-x
(раздел 15.4.3):

jQuery.ехрг[data = function(element, index, match, array) {

// Примечание: В IE версии 7 и ниже метод hasAttгibute отсутствует

return element.hasAttribute("data-" + match[3]):

};

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 (Загрузка), на сайтеможно выбрать компоненты, которые предполагается использовать, и сконструировать собственную версию библиотеки, что поможет вам сократить время загрузки ваших страниц в сравнении со случаем использования полной версии библиотеки jQuery UI.

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

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

datepicker
, как показано ниже: