Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Создаём ваш первый плагин на jQuery UI

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

В jQuery существует метод fn.extend(), который упрощает создание плагинов jQuery, что позволяет нам писать код, который используется в точности так же, как и другие методы jQuery. Пользовательский интерфейс jQuery также содержит структуры, которые упрощают создание плагинов jQuery. Но, вот что мы будем рассматривать в ходе этого урока. Методы которые отличаются от стандартных плагинов jQuery, и здесь работают более жесткие ограничения, которые следует соблюдать, поэтому я считаю, что эта тема заслуживает отдельной статьи.


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

Начинаем 

Нам понадобится копия jQuery, а также несколько файлов из jQuery UI, но это должен быть jQuery UI 1.8 (его можно найти в блоге). Создайте рабочий каталог на вашем компьютере с именем jqueryui-plugin, затем внутри него создайте папку css, папку js и папку img (изображения, используемые в этом руководстве, можно найти в разделе загрузок).

Загрузите библиотеку и распакуйте ее в доступном месте. Нам нужны только несколько файлов из архива, а именно исходный файл jQuery, который находится в корне архива под названием jquery-1.4.1.js, и файлы jquery.ui.core.js и jquery.ui.widget.js, которые находятся в папке ui. Возьмите их и переместите в папку js в рабочем каталоге. Мы также будем использовать облегчённую версию CSS, поэтому нам понадобится одна из таблиц стилей тем, доступных для загрузки вместе с текущей стабильной версией jQuery UI (в этом примере я использовал ui-lightness).

Мы создадим виджет captionator, поэтому нам понадобится страница с кучей изображений на ней, чтобы разработать/протестировать плагин. В этом примере используется следующая страница:

На данный момент у нас будет все просто; всего три изображения на странице, за которыми следуют четыре файла сценариев; три ссылки на исходные файлы jQuery и jQuery UI, четвертая -  на исходный файл нашего плагина, который мы создадим в ближайшее время. Файл jquery.ui.core.js необходим всем виджетам/плагинам jQuery UI. Файл jquery.ui.widget.js является базовой частью виджета и позволяет создавать виджеты, которые обладают общими функциональными возможностями API. Большинство компонентов библиотеки используют это, и мы будем использовать его для создания нашего плагина.

Создание файла плагина

Создайте новый файл JavaScript и сохраните его как jquery.ui.captionator.js в папке js; мы должны придерживаться рекомендаций об именах jQuery UI, которое только что было обновлено в версии 1.8 версиибиблиотеки, и использовать формат jquery.ui.plugin_name.js. Добавьте следующий код в новый файл:

Весь код, который составляет наш плагин, должен быть инкапсулирован в самостоятельную исполняемую анонимную функцию. Объект jQuery передается в эту функцию и используется внутри функции через псевдоним $; это значит, что плагин совместим с методом noConflict() в jQuery. Это чёткое требование и всегда должно соблюдаться. Это чёткое требование и всегда должно соблюдаться.

Затем нам нужно определить плагин; добавьте следующий код в нашу анонимную функцию:

Шаблон для использования базы виджета прост в использовании, мы просто вызываем метод widget(), определяющий имя плагина в качестве первого аргумента, и литерал объекта, содержащий свойства и методы, которые составляют функцию плагина. Это позволяет нашему плагину работать (быть вызванным) с использованием общего синтаксиса jQuery $("element_caption_applied_to").captionator(); как и любой другой метод jQuery или jQuery UI.

База виджета предоставляет нам ряд этих свойств и методов; например, мы можем установить параметры по умолчанию для плагина, используя свойство options, и добавить функцию инициализации, которая автоматически запускается базой виджета, как только вызывается экземпляр плагина. Внутри объекта, который появляется в качестве второго аргумента в предыдущем коде, добавьте следующий код:

Это все настройки, которые мы будем использовать в нашем примере; пользователи (и пользователи, я имею в виду разработчики, а не конечные пользователи) плагина могут указать положение заголовка как в верхней части изображения, на которое он накладывается, так и в нижней части, также можно указать цвет текста заголовка или изменить его фоновый цвет надписи. Чтобы изменить параметр любого виджета на jQuery UI до инициализации, разработчик просто использует нечто похожее:

$("element_caption_applied_to").captionator({ location: "top" });

Затем мы можем создать нашу функцию инициализации, для этого, после объекта options добавьте следующий метод:

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

Большая часть нашего метода инициализации представляет собой ряд переменных; внутри нашей функции ключевое слово this относится к объекту, переданному в метод, который представляет собой экземпляр плагина. Первая переменная кэширует ссылку на текущий экземпляр плагина; метод _create вызывается для каждого элемента, на который выполняется метод плагина, он может быть одним элементом или сразу несколькими.

Мы можем получить доступ к настройкам по умолчанию для плагина (которые автоматически переопределяются, если разработчик настраивает любой из них), используя свойство объекта options; мы кэшируем это во второй переменной. Элемент, который был вызван методом плагина (captionator()), который в этом примере будет изображением, может быть доступен с использованием свойства element объекта. Мы сохраняем его в третьей переменной.

Мы используем четвертую переменную для хранения ссылки на новый элемент заголовка, который построен из простого тега <span>; <span> имеет свой innerText, установленный в атрибуте alt текущего изображения, и к нему добавляются несколько имен классов; мы даем ему имя класса ui-widget, чтобы он приобрел стиль по умолчанию из текущей темы jQuery UI. Мы также присваиваем ему пользовательское имя класса, чтобы мы могли добавить некоторые из наших собственных стилей.

Затем нам нужно настроить некоторые свойства CSS; мы будем использовать отдельную таблицу стилей для некоторых стилей, но обязательные вещи, такие как стили цвета и фона, управляются с помощью настраиваемых параметров, поэтому нам нужно установить их с помощью плагина. Ширина заголовка должна соответствовать ширине изображения, на которое оно накладывается, поэтому нам необходимо определить это и установить программным способом. Наконец, новый <span> встраивается на страницу непосредственно после целевого изображения.

После того, как заголовок был вставлен, необходимо изменить размер и расположить его правильно; единственный способ, которым размер может быть точно установлен, - если объект уже существует в DOM и обладает прикреплёнными к нему правилами CSS, такими как размер шрифта. Вот почему мы встраиваем заголовок в страницу, а затем определяем ее точные размеры, которые затем сохраняются в переменных capWidth и capHeight.

Как только надпись будет добавлена ​​на страницу (только после этого), мы сможем установить правильную ширину, высоту и положение каждой надписи, которые мы снова устанавливаем с помощью метода css(). Заголовки фактически полностью отделены от изображений; они вставляются непосредственно после каждого изображения, а затем перемещаются для того, чтобы перекрыть его, в конце концов, мы не можем просто добавить <span> в качестве дочернего элемента <img>.

Тут всё работает, пока браузер не изменит размер, и в этот момент изображения перемещаются, но заголовки нет, потому что они расположены абсолютно. Чтобы исправить это, мы использовали базовый обработчик изменения размера, привязанный к окну, который просто переносит каждую подпись в новую позицию по отношению к изображению. Этот обработчик событий является последним в нашем методе инициализации.

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

Все, что нам нужно сделать, это удалить заголовки и отвязать обработчик изменения размера окна. Этот метод может быть выполнен плагином, поэтому мы не должны начинать название этого метода с подчеркивания. Чтобы вызвать этот метод, мы будем использовать $("element_caption_attached_to").captionator("destroy"); так как будет выполнен любой из наших публичных методов.

Нам нужно предоставить другой метод, управляемый/выполняемый на базе виджета; мы видели ранее, как разработчик может изменить настраиваемый параметр до инициализации, но что если нужно после инициализации? Это делается с использованием метода option, используя следующий синтаксис: $("element_caption_attached_to").сaptionator ("option", "location", "top"); поэтому нам нужно добавить встроенный метод _setOption

Мы начинаем этот метод с подчеркивания, потому что разработчик использует параметр option, а не _setOption, чтобы фактически изменять настройки; нам не нужно беспокоиться о том, как это обрабатывается, нам просто нужно предоставить этот метод для решения чего-либо конкретного для нашего плагина. Поскольку этот метод уже существует на базе виджета, мы должны вызвать оригинальный метод, который мы делаем в первую очередь с помощью прототипа объекта Widget, указав имя метода (_setOption в этом случае, но мы могли бы сделать это для встроенных методах также), и используйте apply для его вызова. Затем мы можем перейти к коду, специфичного для нашего плагина.

Функция автоматически получит два аргумента, которые могут быть изменены, и новое значение. Мы кэшируем некоторые обычно используемые элементы, такие как изображение и заголовок, и получаем текущую высоту каждого заголовка. Затем мы используем простой оператор switch-case для обработки каждого из трех наших изменяемых параметров. Перестановка подтипов является самой сложной частью, но все же довольно тривиальной и похожей на то, как мы позиционировали их в начале.

Добавление событий

Важно добавить события, в которые разработчики, использующие ваш плагин, смогут добавлять обратные вызовы, чтобы они могли реагировать на различные вещи, происходящие, когда пользователи каким-то образом взаимодействует с виджетами. База виджета обрабатывает большую часть этой задачи для нас, все, что нам нужно сделать, это инициировать событие. Этот плагин на самом деле не делает очень много, но мы все равно можем вызвать событие после добавления каждого заголовка на страницу; для этого добавьте следующий код непосредственно перед обработчиком события resize:

Это все, что нам нужно сделать! Одна строка кода, и у нас есть настраиваемое событие, на которое можно закрепить действие. Мы вызываем метод _trigger() экземпляра плагина, (который мы сохранили в переменной self) и передаем в метод три аргумента; первое - для название события, второе - для объекта события (нам не нужно использовать это в нашем примере плагина, следовательно, установим нулевое значение), а третья - ссылка на элемент заголовка. База виджета автоматически передает объект события (если он указан) и данные, переданные третьим параметром, в функцию обратного вызова, которая использует добавленное событие. Разработчик может выполнить хук к этому событию, используя следующий синтаксис: $("element_caption_attached_to").сaptionator({ added: function(e, ui){ //do stuff });

Стилизация плагина

Нам нужна совсем небольшая таблица стилей для нашего плагина, буквально только три стиля. Даже и не стоит создавать отдельный файл для стилей! Но мы создадим новый файл с именем ui.captionator.css, формат названия которого является обязательным форматом для таблиц стилей плагина и сохраним его в каталоге css. Добавьте к нему следующие стили:

Вот и все. Наш плагин теперь функционально и визуально завершен. Заголовки должны выглядеть следующим образом:

Final Product

Итог

Как и метод создания плагина jQuery - fn.extend(), jQuery UI также имеет свой собственный механизм, который позволяет разработчикам быстро и легко создавать надежные и масштабируемые плагины, которые соответствуют высоким стандартам jQuery UI, хотя с точки зрения того, что он на самом деле делает для нас, это даже лучше, чем в jQuery. База виджета была создана таким образом, что практически вся тяжелая работа выносится за рамки создания плагина.

Легко работать с методами, предоставляемыми базой виджета, чтобы добавлять методы к нашим плагинам, которые являются общими для виджетов пользовательского интерфейса, например методы уничтожения и опций, которые разработчики ожидали найти в любом плагине. Мы также видели, насколько легко запускать пользовательские события, которые разработчики могут использовать для реагирования на взаимодействия или появления с виджетами.

  • Следите за нами в Твиттере или подпишитесь на ленту новостей Nettuts+ чтобы получать информацию о лучших учебных пособиях по веб-разработке в Интернете.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.