Создание плагина jQuery. jQuery слайдер контента, плагин «slideJS»

А теперь пора выделить то, что, по нашему мнению, является лучшими плагинами jQuery этого года. Их всегда появляется множество, но мы считаем, что эти выделяются из остальных с точки зрения функциональности.

Картинки в статье ведут на демонстрационные примеры и страницы плагинов.

jQuery Scroll Path

jQuery Scroll Path – это плагин для определения пользовательских маршрутов прокрутки. Для начертания линий и дуг он применяет вариацию синтаксиса канвы.

freetile.js

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

gridster.js

Вот она – появилась мифическая многоколонная сетка типа «перетащи и брось» (drag-and-drop). Gridster – это плагин jQuery, позволяющий строить интуитивные разметки с возможностью перетаскивания из элементов, прокручивающихся во множестве колонок.

Fancy Input

Эффекты ввода текста CSS3 для полей ввода.

Superscrollorama

Плагин jQuery для суперклассной анимации прокрутки.

jQuery File Upload

Виджет выгрузки с множественным выбором файлов, поддержкой drag&drop, полосами прогресса и изображениями-превью для jQuery. Поддерживает кроссдоменные, отрывочные и возобновляемые выгрузки файлов и изменение размеров изображения на стороне клиента.

jQuery Validation Engine

jQuery validation engine – это плагин Javascript для валидации полей формы в браузере (IE 6-8, Chrome, Firefox, Safari, Opera 10). Плагин обеспечивает визуально привлекательные подсказки, привлекающие внимание пользователя к предмету обсуждения.

Валидация варьируется от адреса электронной почты, номера телефона и URL’а до более сложных запросов, таких как выполнение ajax или пользовательских функций javascript. Связанные со многими локальными сведениями, подсказки об ошибках могут переводиться на любой язык по вашему выбору.

kerning.js

Контролируйте свою типографскую веб-разметку.

equalize.js

Плагин jQuery для выравнивания высоты или ширины элементов.

MeanMenu

Бесплатный плагин jQuery Responsive Menu для скрытия или показа дочерних элементов меню, элемента целевой навигации для обмена с MeanMenu, контрольной ширины экрана, при которой активируется MeanMenu, и многого другого.

Toolbar.Js

Toolbar позволяет быстро создавать панели инструментов в стиле строк-подсказок для использования в веб-приложениях и веб-сайтах. Строка-подсказка легко модифицируется с помощью иконок twitter bootstrap и обеспечивает гибкость отображения панелей инструментов и множества иконок.

Smart Menus

Меню вебсайта, которые работают во всех устройствах.

NProgress

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

FlowType

Веб-разметка в своем лучшем виде: размер шрифта и высота строки на основе ширины элемента.

Device.js

Device.js облегчает написание условного CSS и/или JavaScript’а на базе операционной системы устройства (iOS, Android, Blackberry, Windows), ориентации (книжная vs. альбомная) и типа (планшет vs. мобильный телефон).

10 лет назад, когда jQuery только зарождалась, браузерная экосистема была очень разношерстной и каждый из существовавших тогда продуктов по своему боролся со сложностью управления DOM-элементами. Амбициозной задачей, которую поставили перед собой разработчики jQuery, была разработка универсального подхода к решению этих проблем и создание API, который бы одинаково хорошо работал в любой ситуации.

Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.

Сам JavaScript сейчас совершенно зрелый продукт, хорошо документированный и поддерживаемый всеми современными браузерами. Современное браузерное сообщество тоже более консолидировано и, в большинстве случаев, можно быть уверенным, что если, скажем, страница корректно отображается в Crome, то так же она будет выглядеть и в Firefox. querySelectors тоже поддерживаются практически всеми современными браузерами.

Казалось бы, история развития jQuery движется к закату - зачем перегружать страницы и тратить лишние циклы процессора, если большинство задач можно решить стандартными средствами языка? С другой стороны, за такой долгий для компьютерной индустрии период разработано огромное количество решений, которые можно просто взять и использовать, здесь и сейчас.

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

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

multiscroll.js

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

jquery.email-autocomplete.js

Электронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.

tinyDatePicker

В 5 кБ этого плагина втиснуты немаленькие возможности. Календари, планировщики, бронирование товаров и услуг - далеко не полный перечень, где можно использовать tinyDatePicker. Быстрый, легкий, масштабируемый - его можно легко интегрировать в Bootstrap или любой другой фреймворк.

ReadRemaining.js

Многим из нас всегда катастрофически не хватает времени. Я всегда завидовал людям, которые умеют правильно им распоряжаться. Наверное, к таким относится автор плагина ReadRemaining.js. Кому же еще могла прийти в голову мысль вывести рядом с текстом информацию о том, сколько времени вам понадобится, чтобы прочитать его . И по мере прокрутки текста пересчитывать это время, основываясь на скорости чтения конкретного пользователя.

Весьма оригинальный плагин который, я думаю, понравится посетителям, если у вас много длинного текстового материала.

Tooltipster

Классическая всплывающая подсказка (tooltip) с большим набором функций и опций. Сам элемент может располагаться где угодно по отношению к родительскому элементу и содержать какие угодно элементы. Главное, не переборщить с его применением, используйте его только там где это действительно необходимо.

Addel

Несмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение - динамически добавлять или скрывать HTML-элементы , в первую очередь элементы форм. Управление гибкое и интуитивно понятное.

Chart.js

Активно развивающийся плагин, позволяющий выводить различные типы диаграмм (всего 8 типов, в том числе смешанные). Отлично работает на всех современных браузерах и имеет плавную и симпатичную анимацию при изменении данных.

jQuery Flip-Quote

Очень интересный плагин, который делает две вещи. Во-первых, вращает блоки цитат , присутствующие на странице, в тот момент когда блок становится видимым (отлично привлекает внимание). Во-вторых, при нажатии на этот блок происходит подсветка цитаты в тексте , что позволяет быстро найти ее в общем потоке материала. Оказывается, цитаты тоже можно сделать занимательными!

Algolia Places

Быстрый поиск с автодополнением почтовых адресов, городов, маршрутов и всего, что связано с локациями по всему миру благодаря интеграции с базой данных OpenStreetMap. Очень полезный плагин для интернет-магазинов.

HideSeek

Простой, но функциональный плагин «живого» поиска . Умеет производить поиск, основываясь на различных критериях, выполнять определенные действия после нахождения искомых данных и многое другое.

Timedropper

Существует огромное количество удобных решений для ввода определенного момента времени. Однако Timedropper выделяется среди них простотой и легким управлением. Изменение часов и минут при помощи этого забавного язычка действительно удобно. Он имеет несколько параметров настройки, таких как: формат времени (12 или 24-часовой) , цвет циферблата, теста, фона, а также возможность изменять показания часов и минут при помощи колесика мыши. Кстати, имеется аналогичный плагин для задания даты.

Lory

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

CurrencyFormatter.js

Очень простенький и маленький скрипт, выполняющий отображение числовых значений в денежном формате . Добавляет точки, пробелы для разделения разрядов и символ валюты. Поддерживает 155 валют мира.

Shave.js

Javascript , который аккуратно обрежет текст , не помещающийся в контейнер заданной высоты. Занимает всего 1,5 кБ и не требует сторонних библиотек.

jQuery Linechart

Библиотека для построения диаграмм различных видов и довольно большим количеством исходных данных. Написан на HTML/CSS/JS , однако есть версия и на базе Angular.js

Freewall

Невероятно красивый jQuery плагин для создания плиточного интерфейса в самых разных стилях: Windows Metro, Pinterest, обычном плоском или иерархическом, с перетаскиваемыми и динамически добавляемыми элементами. Отлично работает как на мобильных браузерах, так и на десктопных, включая IE8. Действительно универсальный инструмент!

rowGrid.js

Крошечный плагин, который располагает изображения или другие элементы ровными рядами одинаковой высоты , подбирая размер и зазоры между ними так, что каждый ряд идеально вписывается в ширину окна. Правда, все объекты должны быть одинаковой высоты.

Slidebars

Slidebars добавляет на страницу сайта меню или боковую панель , которые скользящим движением появляются или скрываются по нажатию курсором на управляющую кнопку. Версия 2 этого плагина была полностью переписана и теперь может содержать неограниченное количество самых разных элементов. Имеет полноценный API, возможность подключения собственных callback-функций и подписку на события.

pagePiling.js

Очень напоминает рассмотренный в данном обзоре плагин multiscroll.js, но страница не разбивается на две панели, а смещается целиком. Можно изменять направление смещения и скорость. Хороший выбор для одностраничного сайта, который будет одинаково хорошо выглядеть и на мобильный устройствах и на больших экранах.

Animsition

Основной целью Animsition является воплощение в одном плагине большого и разнообразного набора различных транзитивных эффектов. Среди них затухание и проявление, вращение, отражение, зуммирование и т.п. (всего 58 штук).

ZooMove

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

Rippleria

Легковесный плагин, создающий волновой эффект (похожий на рябь на поверхности воды) на любом DOM-элементе: кнопке, элементе DIV, картинке. Очень легко настраивается и управляется.

Flickity

Быстрый, адаптивный и управляемый жестами слайдер . Внешне - довольно обычный, но с невероятно тщательно написанной и структурированной документацией. Полноценный, и продуманный API.

Unslider

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

Lightcase.js

Выдающийся lightbox с CSS3 анимацией . Работает с DIV, изображениями, текстом, flash-объектами, video и iframe. Пока не поддерживает jQuery 3, но разработчики обещают исправить это в ближайших релизах.

PhotoSwipe

Замечательная галерея изображений с управлением как клавиатурой на дестопных браузерах, так и жестами на мобильных. Имеется возможность установить задержку загрузки фотографий, пока полностью не загрузится сама страница. И все это удовольствие имеет размер всего 14 кБ.

Strip

Strip - это lightbox, который занимает некоторую область страницы, оставляя саму страницу не только частично видимой, но и доступной для взаимодействия с ней. Кроме того может одновременно работать и как слайдер. К тому же, наряду с изображениями, поддерживает и видеоконтент с Youtube и Vimeo .

Turntable.js

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

Vide.js

Пожалуй, самый простой способ добавить фоновое видео на страницу сайта - это воспользоваться плагином Vide.js. Он работает на всех современных браузерах, начиная с IE9+. На iOS и Android, которые не всегда воспроизводят фоновое видео, будет показан стоп-кадр.

Trianglify

Если вы не хотите нагружать страницу фоновым видео, а статическое изображение кажется банальным, попробуйте триангулярность ! Это уникальные геометрические треугольные узоры , которые придадут некую индивидуальность вашему дизайну. Плагин позволяет менять цвет, размер ячеек и дисперсию. Вы даже сможете написать собственную реализацию алгоритма и использовать его в Trianglify.

LazeeMenu

Если у вас на сайте большое иерархическое меню, которое вы хотите сохранить простым и понятным то LazeeMenu несомненно пригодится вам. Он преобразует вложенные ненумерованные списки в удобное выпадающее меню .

Web-ticker

Бегущая строка , похожая на те, которые часто можно увидеть на экране телевизора в выпусках новостей - последние события, биржевые котировки, погода… Да мало ли, что там можно разместить! Так, что если вам нравится такой способ подачи информации - возьмите Web-ticker на заметку.

Inputmask

User experience в действии. Вы помните те времена, когда приходилось заново вводить в форму данные из-за ошибки. Причем ошибка обнаруживалась только после ответа сервера. Забудьте об этом! Inputmask не просто контролирует и отображает визуально правильность вводимых данных , он еще и препятствует введению неправильных. Попробуйте, например, ввести 13-й месяц в поле даты. Маски могут быть самые разные - даты, телефоны, e-mail и даже регулярные выражения .

Недавно, в процессе создания лендинга, столкнулся с проблемой - нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Начнём с постановки задачи. Пусть у нас есть некий jQuery-код, который нужно оформить в виде плагина. Не будем усложнять задачу, возьмём что-то совсем простое, например преключение класса элемента по клику (назовём это «первоначальным кодом»).

JS-код: $(".click").click(function(){ $(this).toggleClass("t-red") }); HTML-код:

К классу.click мы цепляем обработчик «click», который меняет его css-класс на t-red . Метод toggleClass включает/выключает класс по каждому клику.

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

$(".click").myClick();

Это уже типовой вызов jQuery-плагина. Его желательно будет снабдить опциями, чтобы можно было бы задавать произвольный css-класс. Пусть это будет параметр to:

$(".click").myClick({ to: "t-green" });

Ну и, кроме этого, было бы здорово задавать css-класс в html-атрибуте data- , что позволит указывать его прямо в html-разметке:

Почти все jQuery-плагины сейчас строятся по единому шаблону-каркасу. Для сложных плагинов этот каркас дорабатывается для подключения методов и прочих «фишек», но в нашем случае всё очень просто - у нас одна основная функция.

(function($) { // функция вызова jQuery-плагина $.fn.myClick = function(options) { // опции var config = $.extend({}, { op1: "", op2: "" }, options); function main(e) { // это основная функция } this.each(function() { main($(this)); }); return this; }; })(jQuery);

Строчка $.fn.myClick задаёт то, как будет вызываться плагин извне (myClick). Желательно использовать такое имя, чтобы оно не конфликтовало с другими плагинами.

Опции задаются таким образом, чтобы в случае их отсутствия, им присвоилось какое-то значение по умолчанию.

Функция main() собственно и выполняет основную работу плагина. При вызове плагина, она автоматически будет выполнена в строчке this.each(function() { main($(this)); }); . Если вы решите поменять её имя, то не забудьте внести изменения и в этом коде.

Теперь рассмотрим main() . Её парамер e не что иное, как используемый элемент. Наш исходный код переместится в эту функцию в таком виде:

Function main(e) { e.click(function(){ $(this).toggleClass("t-red") }); }

Этот тот же самый «первоначальный» код, только мы использовали переменную e вместо $(".click") .

Теперь добавим опции. Тут всё очень просто:

Var config = $.extend({}, { to: "t-red" }, options);

У нас одна опция. Получить её в функции main() можно так: config.to . В данном случае переменная config содержит все опции, а config.to конкретно выбранную. CSS-класс по умолчанию вы можете задать произвольно. Функция main() теперь будет такой:

Function main(e) { e.click(function(){ $(this).toggleClass(config.to) }); }

Теперь можно задавать опции при вызове плагина, но нам нужно еще добавить возможность их менять/задавать через data-атрибуты. Мы будем использовать штатную возможность jQuery - функцию data() . Она возвращает значение указанного атрибута (без префикса «data-»).

Function main(e) { var to = e.data("to"); if (!to) { to = config.to } e.click(function(){ $(this).toggleClass(to) }); }

Вначале мы получаем data-атрибут «to» в одноименную переменную. Проверяем: если атрибута нет (он не задан), то переменной присваиваем значение из опции.

Получился вот такой плагин:

(function($) { $.fn.myClick = function(options) { var config = $.extend({}, { to: "t-red" }, options); function main(e) { var to = e.data("to"); if (!to) { to = config.to } e.click(function(){ $(this).toggleClass(to) }); } this.each(function() { main($(this)); }); return this; }; })(jQuery);

Подобные простые плагины удобно использовать там, где нужно менять параметры для нескольких блоков на странице.

В сегодняшнем нашем уроке пойдет речь о создании jquery плагина . На нашем сайте опубликован не один урок с использованием jquery. Чаще всего эти уроки базируются на простом написании кода для выполнения конкретной задачи, но формирование из такого кода плагинов предоставляет возможность использовать код повторно, так как в виде плагина этот код обретает большую гибкость благодаря использованию опций (настроек).

Для примера мы возьмем урок . Слайдер хороший пример, так как это достаточно востребованная вещь и при гибкости настроек может выполнять более-менее разные задачи (слайд шоу, карусель изображений и т.п.).

Все требования к верстке описаны в вышеуказанном уроке, поэтому на них останавливаться не будем. Назовем наш будущий плагин «mySimpleSlider».

Плагин представляет собой новый метод в объекте jquery, следственно, для создания плагина, необходимо добавить функцию с его реализацией в объект jQuery.fn, как это показано ниже.

(function($){ jQuery.fn.mySimpleSlider = function(options){ // Здесь будет реализация метода }; })(jQuery);

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

Options = $.extend({ nextBtn:null, // Селектор кнопки "следующий" prevBtn:null, // Селектор кнопки "предыдущий" playBtn:null, // Селектор кнопки play/pause selectors:null, // Селектор "переключателей" slideWidth:100, // Шаг прокрутки (px) delay:null, // Интервал между авто пролистыванием duration:500 // Скорость переключения слайдов }, options);

После этого внутри плагина мы можем обратиться к свойствам, используя запись вида options.имя_свойства . Теперь можем приступить к написанию функций необходимых для работы плагина, но прежде зададим глобальные, по отношению к плагину, переменные:

Var slider = this; // Объект, к которому применен плагин var intervalID; // Указатель таймера

И так, приступим к написанию функций. Как видно из урока, который мы взяли за пример, у слайдера есть управляющие элементы, которые не должны реагировать на действия пользователей в момент выполнения анимационных эффектов во избежание конфликтов. Поэтому в плагине необходимы функции, которые будут отключать/включать вызов функций при использовании пользователем управляющих элементов. Эти функции проиллюстрированы ниже.

// Функция «включения» function start(){ // Вызов функции next при нажатии на nextBtn $(options.nextBtn).on("click", next); // Вызов функции prev при нажатии на prevBtn $(options.prevBtn).on("click", prev); Запуск таймера для авто пролистывания setTimer(); /* Перелистывание на выбранный слайд при условии существования переключателей */ if(options.selectors) { $(options.selectors).on("click", function(){ selectSlide($(this).index()) }); } } // Функция «выключения» function finish(){ // Отключение вызова функций всех событий $(options.nextBtn).unbind(); $(options.prevBtn).unbind(); $(options.selectors).unbind(); // Остановка таймера авто переключения clearInterval(intervalID); }

Код запуска таймера авто пролистывания вынесен в отдельную функцию setTimer так как так как запускать таймер или нет, зависит от нескольких параметров, задаваемых при применении плагина. Эта функция изображена ниже.

Function setTimer(){ // Если задержка не задана - не запускаем таймер if(!options.delay) return false; /* Если задана кнопка play/pause И она в состоянии "pause" - не запускаем таймер */ if(options.playBtn) if($(options.playBtn).hasClass("pause")) return false; // Запуск таймера intervalID = setInterval(next, options.delay); }

Function next(){ /* Если текущий слайд - последний, то возвращаемся к первому */ if(getIndex() == (getCount()-1)) { selectSlide(0); } // Иначе идет перелистывание на следующий слайд else { selectSlide(getIndex()+1); } } function prev(){ /* Если текущий слайд - первый, то переходим к последнему */ if(getIndex() == 0) { selectSlide(getCount()-1); } // Иначе происходит переход на предыдущий слайд else { selectSlide(getIndex()-1); } }

В приведенных выше функциях используются еще три пользовательские функции, которые описаны ниже.

// Функция переключения на слайд //с выбранным индексом function selectSlide(index){ // Отключение срабатывания событий finish(); // Переключение на слайд $(slider).children("ul").animate({left:options.slideWidth *-1*index+"px"}, options.duration, start); // Отображение выбранного слайда в «статус баре» $(options.selectors).removeClass("active"); $(options.selectors).eq(index).addClass("active"); } // Функция, которая возвращает индекс текущего слайда function getIndex(){ return ($(slider).children("ul") .position().left / options.slideWidth)*(-1); } // Функция подсчета количества слайдов function getCount(){ return $(slider).children("ul") .children("li").length; }

Завершает наш плагин функция make , которая и запускается при вызове плагина. Она будет содержать функцию включения события, а так же код запускающий работу кнопки play/pause если такая имеется. Этот код не занесен в функцию start так как используется только один раз, при запуске плагина. Кнопка имеет два состояния: play и pause , которые контролируются через классы с соответствующими названиями. Функция make имеет следующий вид:

Var make = function(){ // Если задана кнопка play/pause if(options.playBtn) { /* При нажатии на кнопку меняем ее состояние на обратное текущему и запускаем либо останавливаем таймер в зависимости от состояния кнопки */ $(options.playBtn).on("click", function(){ if($(this).hasClass("pause")) { $(this).removeClass("pause"); $(this).addClass("play"); setTimer(); } else { clearInterval(intervalID); $(this).removeClass("play"); $(this).addClass("pause"); } }); } // Включение реакции на события // управляющих элементов start(); };

По завершению работы плагин возвращает функцию make :

Return this.each(make);

На этом наш урок по созданию собственных плагинов окончен. Удачной реализации собственных идей и до свидания!

В сети довольно много статей про то, как писать плагины для jQuery, но я решил, что лучше читать первоисточник. А поскольку русской версии мне найти не удалось, и руки чесались что-нибудь попереводить, я попереводил. Оригинал статьи , а мой перевод — ниже.

Итак, вы уже разобрались с jQuery и теперь хотели бы научиться писать собственные плагины. Отлично! Вы пришли в правильное место. Расширение возможностей jQuery с помощью плагинов и методов - это очень мощный механизм, который сэкономит вам и вашим коллегам не один час разработки. Эта статья описывает базовые моменты, рекомендации и распространённые ошибки, которые случаются при написании плагина.

Приступая к работе

Начните писать jQuery-плагин с добавления новой функции-свойства к объекту jQuery.fn . Название функции и будет названием вашего плагина:

JQuery.fn.myPlugin = function() { // Творить волшебство здесь };

Но постойте! Где же чудный значок доллара, к которому я так привык? Он есть, но чтобы убедиться, что ваш плагин не будет конфликтовать с другими библиотеками, которые тоже могут использовать знак доллара, будет лучше сделать так. Передадим объект jQuery в самовызывающуюся функцию (замыкание), которая привяжет его к знаку доллара, так что никакая другая библиотека не сможет его переопределить в текущем scopе"е исполнения.

(function($){ $.fn.myPlugin = function() { // Творить волшебство здесь }; })(jQuery);

Да, так лучше. Теперь внутри этого замыкания мы можем сколько угодно использовать знак доллара вместо jQuery .

Контекст

Теперь, когда у нас есть заготовка, мы можем начать писать собственно код плагина. Но перед этим, я бы хотел сказать пару слов про контекст. В непосредственном scope"е функции-плагина, ключевое слово this - это тот самый jQuery-объект, из которого был вызван плагин.

(function($){ $.fn.myPlugin = function() { // нет необходимости делать $(this), потому что // "this" уже является jQuery-объектом // $(this) - это тоже самое, что и $($("#element")); this.fadeIn("normal", function() { // this - элемент DOM }); }; })(jQuery); $("#element").myPlugin();

Основы

Теперь, когда мы знаем, что такое контекст jQuery-плагинов, давайте напишем плагин, который действительно что-то делает.

(function($){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max(max, $(this).height()); }); return max; }; })(jQuery); var tallest = $("div").maxHeight(); // Возвращает высоту самого высокого div"а

Этот простой плагин возвращает высоту самого высокого div "а на странице, используя метод .height() .

Цепочки вызовов

Предыдущий пример возвращает высоту самого высокого div "а на странице, но зачастую задача плагина не вернуть определённое значение, а модифицировать каким-то образом набор элементов, и передать их дальше, следующему методу в цепочке. В этом красота разработки с использованием jQuery и это одна из причин, почему jQuery так популярен. Чтобы цепочки вызовов работали с вашим плагином, вы должны убедиться, что он возвращает this .

(function($){ $.fn.lockDimensions = function(type) { return this.each(function() { var $this = $(this); if (!type || type == "width") { $this.width($this.width()); } if (!type || type == "height") { $this.height($this.height()); } }); }; })(jQuery); $("div").lockDimensions("width").css("color", "red");

Благодаря тому, что плагин возвращает this , работают цепочки вызовов и jQuery-коллекция может быть передана следующему методу jQuery, например методу .css . Так что, если ваш плагин не должен возвращать какое-то значение, вам всегда следует возвращать this . Кроме того, как вы уже могли заметить, передаваемые в вызове плагина аргументы попадают в текущий scope функции-плагина. Так в предыдущем примере строка "width" становится аргументом type внутри функции-плагина.

Опции и значения по умолчанию

Для сложных плагинов, которые обладают большим количеством параметров, рекомендуется задавать значения по умолчанию, которые могут быть переопределены (с помощью метода $.extend) во время вызова. Таким образом, при вызове плагина можно указать всего один параметр, который заменит соответствующее значение по умолчанию, а не перечислять все возможные параметры. Вот как это делается.

(function($){ $.fn.tooltip = function(options) { var settings = { "location" : "top", "background-color" : "blue" }; return this.each(function() { // Если опции существуют, давайте объединим из с нашими значениями по умолчанию if (options) { $.extend(settings, options); } // Здесь идёт код плагина tooltip }); }; })(jQuery); $("div").tooltip({ "location" : "left" });

В этом примере, после вызова плагина tooltip с заданными параметрами, значение для параметра location переписывается и становится равным "left" , а значение background-color остаётся как и было "blue" . Итоговый объект с параметрами будет выглядеть так:

{ "location" : "left", "background-color" : "blue" }

Значения по умолчанию - это отличный способ предоставить максимальную гибкость настройки плагина без необходимости указывать все параметры сразу.

Пространства имён

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

Методы

Ни при каких обстоятельствах плагин не должен использовать больше одного пространства имён в объекте jQuery.fn .

(function($){ $.fn.tooltip = function(options) { // ТАК }; $.fn.tooltipShow = function() { // ДЕЛАТЬ }; $.fn.tooltipHide = function() { // НЕЛЬЗЯ }; $.fn.tooltipUpdate = function(content) { // !!! }; })(jQuery);

Такой подход создаёт беспорядок в пространствах имён $.fn . Чтобы этого избежать, соберите все методы вашего плагина в один объект и вызывайте их путем передачи плагину названия нужного метода в качестве параметра.

(function($){ var methods = { init: function(options) { // ТАК }, show: function() { // ДЕЛАТЬ }, hide: function() { // ПРАВИЛЬНО }, update: function(content) { // !!! } }; $.fn.tooltip = function(method) { // Логика вызова метода if (methods) { return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || ! method) { return methods.init.apply(this, arguments); } else { $.error("Метод " + method + " не существует в jQuery.tooltip"); } }; })(jQuery); $("div").tooltip(); // вызов метода init $("div").tooltip({ // вызов метода init foo: "bar" }); $("div").tooltip("hide"); // вызов метода hide $("div").tooltip("update", "Это новый контент тултипа!"); // вызов метода update

Такой тип архитектуры позволяет вызывать методы плагина передачей первым параметром названия метода, а остальными параметрами - параметров, которые могут понадобиться этому методу. Он считается стандартом в среде разработчиков плагинов для jQuery и применяется в несчетном числе проектов, включая плагины и виджеты в jQueryUI .

События

У метода bind есть возможность, о которой мало кто знает, - использование пространств имён для привязки обработчиков событий. Если ваш плагин обрабатывает события, то было бы неплохо для обработчиков указать своё пространство имён. Тогда, если понадобится отвязать эти обработчики от событий, то вы сможете легко это сделать не затрагивая другие обработчики тех же событий. Чтобы назначить пространство имён нужно дописать.namespace к типу привязываемого события.

(function($){ var methods = { init: function(options) { return this.each(function(){ $(window).bind("resize.tooltip", methods.reposition); }); }, destroy: function() { return this.each(function(){ $(window).unbind(".tooltip"); }) }, reposition: function() { // ... }, show: function() { // ... }, hide: function() { // ... }, update: function(content) { // ... } }; $.fn.tooltip = function(method) { if (methods) { return methods.apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === "object" || ! method) { return methods.init.apply(this, arguments); } else { $.error("Метод " + method + " не существует в jQuery.tooltip"); } }; })(jQuery); $("#fun").tooltip(); // А потом... $("#fun").tooltip("destroy");

В этом примере, при инициализации плагина tooltip, происходит привязка обработчика reposition к событию resize объекта window с использованием пространства имён tooltip. Если потом понадобится отключить плагин, то отвязать привязанные им события можно будет передав методу unbind название пространства имён, в нашем случае - "tooltip". Таким образом можно отвязывать обработчики событий, привязанные плагином, не опасаясь случайно отвязать чужие.

Данные

Зачастую, при разработке плагинов, требуется сохранять состояния или проверять, был ли ваш плагин инициализирован на конкретном DOM-элементе. Удобный способ следить за переменными на уровне отдельных элементов - использование метода jQuery data . Но, вместо того, чтобы следить за кучей отдельных data -вызовов с разными именами, лучше сохранить все ваши переменные в один объект, используя его как пространство имён, и делать data -вызов к нему.

(function($){ var methods = { init: function(options) { return this.each(function(){ var $this = $(this), data = $this.data("tooltip"), tooltip = $("