А теперь пора выделить то, что, по нашему мнению, является лучшими плагинами 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. мобильный телефон).
Как вы уже знаете, одним из главных качеств библиотеки jQuery является очень удобный поиск элементов и возможность дальнейших манипуляций с ними. Так вот, список этих манипуляций можно расширять, организуя новые методы для объекта jQuery . Вынесенные в отдельный файл, такие расширения образуют плагины для библиотеки jQuery.
Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин в качестве примера. Его функциональность будет состоять в добавлении нового поведения для выбранных элементов — изменение цвета при наведении курсора. Назовем плагин responsiveBlock (отзывчивый блочный элемент).
Создание файла с плагином и его подключение
Обычно, javascript-плагины располагаются в отдельных файлах. Для файлов с плагинами jQuery существует соглашение касательно их названия — оно должно удовлетворять формату jquery.plaginName.js . Таким образом, файл с нашим плагином нужно будет назвать jquery.responsiveBlock.js .
Чтобы наш плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а затем js-файл с нашим плагином плагина:
~lt~script src="jquery.min.js"~gt~~lt~/script~gt~ ~lt~script src="jquery.responsiveBlock.js"~gt~~lt~/script~gt~
Основа для плагина
Переменная this , в теле метода, всегда содержит текущий объект jQuery (тот, на котором и был вызван метод). Для того, чтобы обойти все выбранные элементы по отдельности, используем метод .each() . А для возможности продолжить цепочку методов наш метод должен будет возвратить текущий объект jQuery:
(function ($) { jQuery.fn .responsiveBlock = function () { var make = function () { } ; } ) (jQuery) ;
Добавление свойств плагину
В большинстве плагинов требуется наличие настроек. В нашем плагине например, будет очень полезна возможность указывать цвет элемента пока на него не наведен курсор и цвет после наведения. Существует один простой вариант организации настроек у плагина jQuery. Он позволят задавать список свойств, а так же их значения по умолчанию. Свои значения этих свойств, при этом, можно будет задавать в момент установки плагина на элемент, в первом параметре:
(function ($) { jQuery.fn .responsiveBlock = function (options) { // Зададим список свойств и укажем для них значения по умолчанию. // Если при вызове метода будут указаны пользовательские // варианты некоторых из них, то они автоматически перепишут // соответствующие значения по умолчанию options = $.extend ({ defColor: "white" , hoverColor: "red" } , options} ; var make = function () { // реализация работы метода с отдельным элементом страницы } ; return this .each (make) ; // в итоге, метод responsiveBlock вернет текущий объект jQuery обратно } ; } ) (jQuery) ; // теперь можно задавать плагин с настройками по умолчанию: $("div:first" ) .responsiveBlock () ; // или указать свои значения некоторых или всех настроек $("div:last" ) .responsiveBlock ({ defColor: "#bbbbbb" } ) ; $("ul" ) .responsiveBlock ({ defColor: "#aaaaaa" , hoverColor: "green" } ) ;
(Для лучшего понимания данного примера стоит ознакомиться с назначением функции $.extend).
Полученная выше заготовка, является наиболее распространенным вариантом шаблона для плагинов jQuery. Поэтому если вы решили написать свой плагин, то можете смело начинать именно с нее (естественно со своим именем плагина и своим списком настроек).
Дальнейшая реализация
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div{padding:10px; margin:5px; border:3px solid red} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div~gt~Блок на странице~lt~/div~gt~ ~lt~script~gt~ (function($){ jQuery.fn.responsiveBlock = function(options){ options = $.extend({ defColor:"white", //цвет элемента над которым нет курсора hoverColor:"red" //цвет элемента на который наведен курсор }, options); var make = function(){ // здесь переменная this будет содержать отдельный // DOM-элемент, к которому и нужно будет применить // воздействия плагина $(this).css("background-color",options.defColor) .mouseenter(function(){ $(this).css("background-color",options.hoverColor); }) .mouseleave(function(){ $(this).css("background-color",options.defColor); }); }; return this.each(make); }; })(jQuery); $("div").responsiveBlock(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Генерация событий
Библиотека jQuery позволяет организовывать собственные события на элементах, и в дальнейшем устанавливать их обработчики (как на события onClick или onMousemove). Чтобы генерировать собственные события на выбранных элементах необходимо воспользоваться методом .trigger() , а устанавливать их обработчики можно с помощью .on() . Таким образом, плагины могут предоставлять не только новую функциональность но и связанную с ней систему событий, которой сможет воспользоваться любой пользователь вашего плагина.
Чтобы имена событий вашего плагина не пересекались с чужими именами событий, используйте пространства имен . Для этого удобнее всего использовать имя самого плагина.
В нашем плагине можно организовать событие stateChange , которое будет происходить при смене состояния элемента (наведен курсор или нет):
(function ($) { jQuery.fn .responsiveBlock = function (options) { options = $.extend ({ defColor: "white" , //цвет элемента над которым нет курсора hoverColor: "red" //цвет элемента на который наведен курсор } , options) ; var make = function () { // здесь переменная this будет содержать отдельный // DOM-элемент, к которому и нужно будет применить // воздействия плагина $(this ) .css ("background-color" , options.defColor ) .mouseenter ( function () { $(this ) .css ("background-color" , options.hoverColor ) .trigger ("responsiveBlock.stateChange" ) ; //-вызов события } ) .mouseleave ( function () { $(this ) .css ("background-color" , options.defColor ) .trigger ("responsiveBlock.stateChange" ) ; //-вызов события } ) ; } ; return this .each (make) ; } ; } ) (jQuery) ; // теперь к элементам страницы можно будет привязывать обработчики события stateChange: $("div" ) .on ("responsiveBlock.stateChange" , handler) ;
1. Реализация портфолио с использованием jQuery галереи
Миниатюры проектов прокручиваются при изменении положения курсора мыши в левой колонке. В области содержимого отображается увеличенное изображение с названием проектов, описанием и списком используемых технологий. При переходе между миниатюрами информация о проектах сменяет друг друга с потрясающим анимированным эффектом. При нажатии на изображение на странице с описанием, оно увеличивается также с использованием jQuery анимации. Еще хочется отметить потрясающий элегантный внешний вид всей страницы портфолио. Смотрите демо.
2. Супер реализация сайта-портфолио с использованием CSS и jQuery
Превосходная реализация сайта-портфолио фотографа. При нажатии на пункт меню из разбросанных по экрану квадратов собирается область с контентом фиксированной высоты и ширины. Для того, чтобы поместить больше информации в фиксированную область, предусмотрена прокрутка содержимого. Необычно реализована реализация показа работ из портфолио: при клике по миниатюре фотография отображается в виде фонового изображения, которое автоматически масштабируется при изменении размера окна браузера.
3. Стена-портфолио на jQuery
Оригинальное решение для создания онлайн-портфолио. Блоки проектов (миниатюры и краткое описание со ссылкой) отображаются по несколько в ряд, при изменении окна браузера блоки перераспределяются равномерно на странице с анимированным эффектом. У каждого проекта может быть несколько изображений-миниатюр, переход между которыми осуществляется с помощью стрелочек. При нажатии на ссылку открывается страница с полным описанием, на которой текст помещен на полупрозрачном блоке фиксированной высоты с прокруткой. В качестве фона страницы используется масштабируемое изображение проекта. Выглядит прикольно - смотрите демонстрацию.
4. Плавная jQuery прокрутка страниц
Реализация вертикальной и горизонтальной прокрутки.
5. Плагин jQuery «Draggable Image Boxes Grid»
Перетаскиваемая сетка, состоящая из блоков с содержимым и изображений. Сетку можно перетаскивать с помощью мышки (нажать любую кнопку мыши и тянуть в нужную сторону). При клике на миниатюру основное изображение разворачивается на всю ширину экрана. При клике темный блок с текстом, раскрывается область с более подробным описанием.
6. Одностраничный сайт портфолио
Одностраничный сайт с анимированной сменой содержимого. На демонстрационной странице пройдитесь по вкладкам меню, чтобы увидеть эффект.
7. Переключение вида отображения блоков на jQuery
С помощью этого jQuery плагина «Switch Display Options» можно реализовать переключатель на странице, с помощью которого посетитель будет переходить от табличного отображения информации к полному просмотру с описанием блоков. Отлично подойдет для реализации портфолио.
8. Шаблон для сайта ресторана с jQuery галереей и картой от Google
Оригинальное jQuery решение, созданное для сайта кафе. В шаблоне реализована интересная jQuery галерея для показа блюд из меню. Изображения в галерее масштабируются в зависимости от размера окна браузера. Сперва, в галерее отображаются уменьшенные изображения с названием и кратким описанием блюд, при этом полноразмерная фотография отображается затемненной на заднем фоне. Навигация между доступными фотографиями осуществляется с помощью стрелок или колеса мыши. Щелчок мыши в режиме галереи уберет миниатюры с описанием и даст возможность рассмотреть оригинальные большие изображения, растянутые на всю ширину окна. Для возврата в меню сайта из галереи необходимо нажать на ссылку в правом верхнем углу. Помимо шикарной jQuery галереи в шаблон очень эффектно интегрирована карта от Google.
9. Плагин Plasm The Wall
Для создания своеобразных «стен» из фотографий или HTML блоков, которые при помощи мышки можно перетаскивать по экрану в пределах фиксированной области.
10. Плагин для отображения элементов по окружности
Отображение на странице различных элементов по окружности заданного диаметра.
11. Страница-заглушка «Сайт в разработке»
На странице реализована возможность отправить е-мейл адрес, который записывается в базу данных и на который можно будет выслать уведомление об открытии сайта. Также страница украшена небольшим слайд-шоу, реализованном на базе jQuery плагина Nivo Slider v. 2.3 .
12. Плагин QuickFlip 2
С его помощью вы сможете сделать интересный эффект поворачивающейся визитной карточки при нажатии на ссылку.
13. JQuery карта кликов
Идея заключается в отслеживании кликов пользователей. Для того чтобы посмотреть плагин в работе на демонстрационной странице, покликайте мышкой, а затем нажмите кнопку «Анализ». И на полупрозрачном фоне отобразятся точки, где вы кликали мышью.
Реализация симпатичной экранной клавиатуры. Мало ли, для чего-то вам пригодится.
15. Записки jQuery
Реализация листков с записками. Текст можно редактировать, а сами записки удалять или перемещать по экрану. Чтобы посмотреть пример, перейдите на демонстрационной странице на вкладку «Demo».
16. Рейтинг на jQuery
17. HoverAttribute
Интересное оформление ссылок: при наведении на ссылку изменяется ее анкор. Смотрится прикольно.
18. jQuery Fancy капча для формы регистрации
Реализация капчи для формы регистрации. Плагин представляет собой набор цифр, которые необходимо путем перетаскивания выставить в порядке возрастания. Довольно интересный способ для подтверждения того, что регистрацию проходит живой человек, а не робот.
Внизу экрана отображаются кнопки, которые можно использовать для плавной прокрутки страницы вверх или вниз.
20. Переводчик. jQuery плагин «jTextTranslate»
Плагин использует Google Language API и может переводить текст на любые языки, предоставляемые Google. Для перевода необходимо нажать на значок рядом с абзацем и из выпадающего списка выбрать язык, на который необходимо перевести.
21. jQuery плагин для постраничной навигации
Отличная реализация прокручивающихся ссылок для постраничной навигации. Реализовано с использовании jQuery.
22. jQuery плагин «Заметки»
Этот jQuery плагин позволит реализовать «бумажные» заметки на вашем сайте.
23. jQuery плагин «Catch404»
24. jQuery плагин jBreadCrumb
Плагин для создания анимированной цепочки навигации «Хлебные крошки»
25. Плагин «Reel»
26. jQuery плагин «Dance Floor»
jQuery плагин для реализации страницы с товарами. При нажатии на изображение товара появляется его описание.
27. jQuery плагин «3D облако меток»
28. Объемные CSS кнопки
29. Анимированная горизонтальная прокрутка страницы
jQuery эффект вертикальной прокруткой страницы. Отлично подойдет для реализации одностраничных сайтов и сайтов-портфолио. Для просмотра эффекта нажмите на пункт меню на демонстрационной страницы.
30. jQuery плагин «Rating System»
jQuery эффект для реализации оценки чего-либо. Цвет кружков и текст под ними изменяется в зависимости от того, на какой из них наведен курсор мыши.
31. jQuery Panel Magic
Плагин, реализующий навигацию по сайту. При этом ваш сайт представлен в качестве сетки документов, между которыми осуществляется переход с интересным jQuery эффектом.
Вы можете легко использовать этот плагин для создания небольших сайтов и веб-приложений. Так же он не плохо будет смотреться на сайтах-портфолио.
32. Индикатор загрузки на Mootools, плагин «MoogressBar»
Эффектный индикатор загрузки.
33. Mootools плагин «CwComplete»
При заполнении поля, плагин подскажет возможные варианты для заполнения с использованием Ajax, при этом он отфильтрует и покажет только те варианты, которые удовлетворяют уже введенному в поле тексту.
34. Отличный ajax-чат с применением jQuery и CSS3
Перед тем как начать общение посетитель должен ввести свой ник и e-mail. В правой колонке показано, сколько человек авторизованы в чате. Используемые технологии: PHP, MySQL, jQuery, CSS.
35. Реализация страницы «Предложить по проекту»
Посетители могут добавить новое предложение либо проголосовать за уже существующее. Отличное решение для тех, кто хочет узнать мнение своей аудитории о сайте. Также эту страницу можно использовать чтобы накопить новые идеи для дальнейшего развития вашего проекта. Используемые технологии: PHP, MySQL, jQuery, CSS
36. Реализация голосования/опроса с помощью PHP и jQuery
37. Голосование на Ajax «TinyEditor»
Аккуратная реализация опросов на сайте. Используемые технологии: JQuery, Ajax, PHP и MySQL.
Очень интересное решение для реализации голосования на сайте. Перетаскивая вверх и вниз блоки, схватив мышкой за изображения, можно расположить их на странице в любой последовательности. Чем выше вы оставите блок, тем лучше его оценили и, соответственно, если блок разместить в самом низу, значит, он меньше всего вам понравился. После того, как вы расставите блоки в нужной последовательности, необходимо нажать на кнопку «Submit poll», чтобы голос был учтен. На странице с результатами отображаются результаты голосования и количество проголосовавших посетителей. Используемые технологии: CSS, PHP, MySQL, jQuery.
Простая система комментирования на Ajax с проверкой правильности ввода информации. Комментарии хранятся в базе данных. Реализовано с использованием: PHP, MySQL, CSS, jQuery.
40. Счетчик количества скачиваний файла
41. Заметки на странице с использованием PHP
Использованные технологии: PHP, jQuery, CSS.
При переходе по пунктам меню содержимое подгружается без перезагрузки страницы. Используемые технологии: PHP, jQuery, CSS.
43. jQuery поиск по сайту с использованием технологии от Google
Реализация поиска по сайту с использованием API Google AJAX Search . Вы сможете предоставить возможность посетителю произвести поиск как на вашем сайте, так и в интернете. При этом поиск можно осуществлять не только по страницам сайта, но и по изображениям и мультимедийным файлам.
44. jQuery эффект наложения описания на изображение
Очень интересный эффект, может быть использован в реализации портфолио. При нажатии на изображение оно затемняется полупрозрачным фоном, и появляется надпись с описанием того, на что следует обратить внимание.
45. Реализация страницы «Вопрос-ответ» с помощью jQuery
jQuery реализация страницы FAQ на сайте. Вверху страницы отображается список вопросов. При нажатии на вопрос страница плавно прокручивается к выбранному вами, и активный вопрос с ответом на него подсвечивается другим цветом. Так же в поле активного ответа появляется ссылка для возврата к списку вопросов.
46. Сайт на Ajax. Содержимое подгружается без перезагрузки страницы
47. Смена цвета фона и текста с помощью jQuery
Цвет изменяется при наведении курсора мыши. Можно сделать так, чтобы цвет изменялся случайным образом.
48. Путеводитель по сайту с использованием jQuery
С помощью этого интересного плагина можно познакомить посетителя с основными функциями вашего сайта, если он попал на него впервые. При загрузке страницы в верхнем правом углу выезжает блок с предложением провести экскурсию по сайту. Если посетитель впервые зашел на ваш сайт, он может с помощью небольшого путеводителя познакомиться с основными функциями. При этом страница затемняется и необходимые блоки на каждом шаге помечаются пометкой. Если же посетитель уже был ранее на вашем сайте, он просто может закрыть окно с предложением экскурсии по сайту.
49. Виртуальный тур по сайту «Joyride Kit»
С помощью этого плагина можно познакомить посетителя с основными функционалом страницы. Делается это в виде последовательного всплывающего описания элементов. Посетитель может посмотреть все подсказки, нажимая на кнопку Next, либо закрыть онлайн-тур (если он уже не первый раз попадает на эту страницу) воспользовавшись крестиком.
Приступая к работе
Начнем писать JQuery плагин, с добавления нового метода к объекту jQuery.fn, где имя метода - это название Вашего плагина:
JQuery.fn.myPlugin = function() { // здесь помещаете код Вашего плагина };
Но постойте! Где же мой знак доллара, который я знаю и люблю?- спросите Вы. Он по прежнему доступен, однако надо убедиться, что Ваш плагин не будет конфликтовать с другими библиотеками, которые также могут использовать знак доллара(Mootools, Prototype). Для этого код Вашего плагина нужно поместить в само вызывающееся замыкание.
(function($){ $.fn.myPlugin = function() { // здесь код Вашего плагина }; })(jQuery);
Так-то лучше. После этого, другие библиотеки сколько угодно могут изменять знак $, на Вас это не отразится. Внутри замыкания, $ будет равен jQuery.
Контекст
Теперь у нас есть оболочка, и мы можем начать писать фактический код плагина. Но прежде, чем мы это сделаем, я хотел бы сказать несколько слов о контексте. Внутри плагина зарезервированное слово this это ссылка на объект jQuery. Но когда, в коде плагина используются callback функции, то там this - это ссылка на нативный DOM элемент. Ошибки возникают тогда, когда разработчики лишний раз делают $(this) или наоборот забывают это делать
(function($){ $.fn.myPlugin = function() { // тут не нужно делать так $(this) потому-что // "this" уже является объектом jquery // $(this) будет обозначать то же самое, что $($("#element")); this.fadeIn("normal", function(){ // а вот здесь this это ссылка на нативный DOM объект, и чтобы работать с ним // надо сделать так $(this) }); }; })(jQuery); $("#element").myPlugin();
Hello World!!!
Теперь, когда мы понимаем контекст 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"а
Это простой плагин, который использует метод .height() для возвращения высоты самого высокого DIV"а на странице.
Поддержка цепочек вызовов
В предыдущем примере плагин возвращает целое значение, высоту самого высокого 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 в непосредственном теле функции плагина. Кроме того, параметры которые вы подаете при вызове плагина, подаются как аргументы функции плагина. В примере выше таким аргументом является type, а при вызове в него подается значение "width". Кстати, плагин Выше закрепляет высоту или ширину каждого блока на странице, в соответствии с его текущими размерами.
Умолчания и опции
Для более сложных и настраиваемых плагинов, которые поддерживают множество опций, лучшим вариантом будет, иметь настройки по умолчанию, которые могут быть переопределены или дополнены (используя $.extend), при непосредственном вызове плагина. Таким образом, вместо вызова плагина с большим количеством аргументов, Вы можете вызвать его с одним аргументом, который является объектом с полями и значениями, которые Вы бы хотели переопределить в настройках по умолчанию. Вот как это делается.
(function($){ $.fn.tooltip = function(options) { var settings = { "location" : "top", "background-color" : "blue" }; return this.each(function() { // если опции существуют, то совмещаем их // со значениями по умолчанию if (options) { $.extend(settings, options); // при этом важен порядок совмещения } // код плагина тут }); }; })(jQuery); $("div.tools").tooltip({ "location" : "left" });
В этом примере, после вызова плагина tooltip с соответствующими опциями, в настройках по умолчанию затирается поле location на значение "left". В итоге Так настройки примут вид:
{ "location" : "left", "background-color" : "blue" }
Это отличный способ предложить полностью настраиваемый плагин, при этом не требуя от разработчика определить заполнить все настройки. Т.е. если разработчика все устраивает, то он может вызвать плагин и так:
$("div.tools").tooltip(); // все настройки останутся по умолчанию
Пространство имен
Правильное пространства имен вашего плагина является очень важной частью разработки плагинов. Верно именованный плагин будет иметь очень низкий шанс быть перезаписанным другими плагинами или кодом. Верное именование методов также делает Вашу жизнь проще, так как это помогает лучше отслеживать именно Ваши методы, события и данные. Идея просто, обдуманно называйте Ваш плагин. Посмотрите на следующий пример
Методы плагина
Ни при каких обстоятельствах плагин не должен занимать более чем одно имя в объекте jQuery.fn.
(function($){ $.fn.tooltip = function(options) { // ЭТО }; $.fn.tooltipShow = function() { // ОЧЕНЬ }; $.fn.tooltipHide = function() { // ПЛОХО }; $.fn.tooltipUpdate = function(content) { // !!! }; })(jQuery);
Такой код загромождает объект $.fn . Это рекомендуется, поскольку может помех до $. 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 является то, что он позволяет для одного пространства имен установить события. Если ваш плагин порождает некие события, хорошей практикой будет, чтобы событие привязывалось к Вашему пространству имен. Таким образом, если Вам нужно отключить позже, Вы можете сделать это без вмешательства в другие события, которые, возможно, были привязаны к одному типу событий. Вы можете использовать уникальные имена Ваших событий, путем добавления ".<название плагина>".
(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 инициализируется методом init, он связывает метод reposition с событием resize окна в пространстве имен "tooltip". Позже, если разработчик должен уничтожить tooltip, мы можем отключить события, связанные c плагином, передав его имя, в данном случае "tooltip", в метод unbind. Это позволяет безопасно отключить события плагина, без случайной отмены привязки событий, которые были связаны с событиями за пределами плагина.
Данные
Часто при разработке плагинов, Вам может понадобиться проверить состояние плагина или проверить, инициализирован ли уже Ваш плагин на данный элемент. Использование метода jQuery.data является отличным способом для отслеживания и хранения переменных для каждого элемента. Однако вместо того, чтобы обслуживать кучу отдельных вызовов data с разными именами, лучше использовать один объект содержащий все переменные, и доступ к этому объекту будет через одно имя.
(function($){ var methods = { init: function(options) { return this.each(function(){ var $this = $(this), data = $this.data("tooltip"), tooltip = $("
", { text: $this.attr("title") }); // плагин еще не инициализирован if (! data) { /* Дополнительные возможности установки */ $(this).data("tooltip", { target: $this, tooltip: tooltip }); } }); }, destroy: function() { return this.each(function(){ var $this = $(this), data = $this.data("tooltip"); $(window).unbind(".tooltip"); data.tooltip.remove(); $this.removeData("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 " + method + " does not exist on jQuery.tooltip"); } }; })(jQuery);Использование data помогает Вам следить за переменными и состоянием плагина из самого плагина. Именование данных в один объект сходное с именем плагина, позволяет легко получить доступ ко всем полям Вашего плагина из одного места, а также легко удалять все связанные с плагином данные, если это будет необходимо.
Резюме
Написание плагинов на jQuery позволяет Вам объединить Ваши самые удобные функции и любой часто повторяющийся код в одном месте, что позволит сэкономить время и сделать Ваше программирование еще более эффективным. Вот краткое резюме, того, что Вы должны иметь ввиду при разработке своего следующего плагина:
- Всегда окружайте плагин в замыкание (function($){ // тут Ваш плагин })(jQuery);
- Не нужно оборачивать this в теле плагина, это будет избыточным действием
- Плагин должен возвращать this в своей функции, если плагин не должен возвращать какого-то конкретного значения, тогда он будет поддерживать цепочки вызовов
- Вместо того, чтобы подавать все настройки сразу при запуске плагина, лучше определить их значения по умолчанию, т.о. малознакомый с плагином пользователь сразу сможет проверить его работу
- Не создавайте для одного плагина больше одного имени в jQuery.fn
- Всегда используйте пространство имен Вашего плагина при работе с данными и событиями.
- jQuery.fn произносится как jQuery effin"
Рассказать друзьям
Несмотря на столь большое количество документации о написании jquery плагинов, нигде не возможно, найти хороших практических советов. Нет ни одного примера документа, где описано, какими качествами должен обладать хороший jquery плагин. Но вам сегодня повезло, в этой статье мы рассмотрим 12 прекрасных советов, которые помогут вам написать великолепный плагин к jquery.
В этой статье мы меньше будем фокусироваться на самом Java Script коде, больше будем уделять внимания практическим советам.
1 - Пишите плагин по правильному шаблону
Существуют некоторые шаблоны, которые в той или иной степени, соответствуют «правильному способу» написания плагинов. Если вы не будете следовать этим шаблонам, ваш плагин может работать не правильно. Вот один из наиболее известных шаблонов:
(function($, window, undefined){ $.fn.myPlugin = function(opts) { var defaults = { // установите ваши сстандартные переменные } // дополните стандартные опции пользовательскими var options = $.extend(defaults, opts || {}); return this.each(function(){ // jQuery chainability // действия плагина }); })(jQuery, window);
Для начала, мы создаем анонимную функцию, которая защитит нас от использования глобальных переменных. По умолчанию передаются три аргумента $, window, и undefined. Они потребуются ядром jQuery.
Далее мы напишем шаблон jQuery плагина, $.fn.PluginName. Таким образом, мы регистрируем плагин, чтобы можно его было использовать в формате $(selector).method(). Если вы хотите вместо написания плагина использующего функции, сделать его напрямую, пишите следующим образом:
$.PluginName = function(options){ // опции и действия плагина }
Такой тип плагина не может иметь цепочку функций, он будет состоять из одной прямой функции. Для примера:
$.splitInHalf = function(stringToSplit){ var length = stringToSplit.length; var stringArray = stringToSplit.split(stringToSplit); return stringArray; }
В этом коде, мы возвращаем массив строк. Для большей ясности, еще один пример:
$.getOddEls = function(jQcollection){ // return jQcollection.filter(function(index){ var i = index+1; return (index % 2 != 0); }); }
В этом случае, пользователь получает jQuery объект, фильтр, которые берется из jQuery коллекции. Плагины могут возвращать, как массивы, так и строки, цифры, функции, и другие типы данных.
2 - Документируйте свой код (корректно)
Наиболее важная вещь которую вы можете сделать, когда публикуете свой код - документирование. Это значит, что вам нужно объяснить разработчикам, что ваш код делает или может делать. Никому из пользователей не хочется догадываться, на что способен ваш код.
Документация, это практика, которая не потребует особых правил для ее реализации. Хотя, и так понятно, что чем удобнее и подробнее расписана, тем лучше.
Нужно документировать как внутри кода (комментированием), так и снаружи - отдельным документом, расписать каждый класс, метод, опцию, их случаи использования и так далее.
3 - Сделайте ваш плагин гибким в настройках
Наиболее популярные плагины предрасполагают возможность доступа к переменным, чтобы пользователи могли контролировать некую функциональность плагина. Также, хорошей вещью является возможность вносить свои настройки. Для примера, при создании плагина слайдера, уместными настройками будут - скорость перелистывания, тип слайд шоу, и расширение блока слайдера.
Также хорошей практикой, является возможность доступа к именам классов и ID, с помощью которых мы выбираем DOM элемент. Наряду с этим, они также должны иметь возможность иметь доступ к callback функции, во время каждого ее вызова. Или, когда слайдер делает цикл и возвращается на первый элемент (картинку).
«Это ваша задача, думать об удобстве использования и потребностях пользователей»
Давайте рассмотрим еще один пример: плагин делает запрос к API, он должен иметь возможность доступа к возвращенному объекту. Вот пример этой концепции:
$.fn.getFlickr = function(opts) { return this.each(function(){ // jQuery chainability var defaults = { // опции по умолчанию cb: function(data){}, flickrUrl: // стандартные значения для вызова API } // расширяем опции пользовательскими var options = $.extend(defaults, opts || {}); // вызываем асинхронные функции потом callback // передаем в API объект, который возвратился $.ajax(flickrUrl, function(dataReturned){ options.cb.call(this, dataReturned); }); }); }
Такой код, позволяет нам иметь доступ к данным с помощью следующей строки:
$(selector).getFlickr(function(fdata){ // flickr данные в fdata объекте });
Иной способ доступа к данным, использование хуков (крючков), как опций. В jQuery версии 1.7.1 и выше, мы можем использовать.on(eventName, function(){}) после вызова нашего плагина, чтобы использовать поведение плагина в собственных функциях пользователей. Для примера, плагин ниже, хороший пример, как это реализовать:
$.fn.getFlickr = function(opts) { return this.each(function(i,el){ var $this = el; var defaults = { flickrUrl: "http://someurl.com" } var options = $.extend(defaults, opts || {}); $.ajax(flickrUrl, function(dataReturned){ $this.trigger("callback", dataReturned); }).error(function(){ $this.trigger("error", dataReturned); }); }); }
Это дает нам возможность вызывать getFlickr плагин, плюс к этому, прицеплять некоторые «пожелания».
$(selector).getFlickr(opts).on("callback", function(data){ // действие }).on("error", function(){ // обработка ошибки });
Вы даже не подозреваете, насколько важно снабжать свой jQuery плагин гибкостью и возможностью настройки. Чем более сложный ваш плагин - тем более настроек должен содержать.
4 - Не используйте слишком много конфигураций
Не смотря, на предыдущие слова, большой ошибкой является использования слишком большого числа настроек. Для примера, очень удобно при разработке UI использовать плагины, которые имеют все аргументы по умолчанию.
$(selector).myPlugin();
В целом, иногда это не реально, так как пользователя хотят иметь возможность настроить функциональность. В этом случае, вы должны предоставить возможность как «по умолчанию», так и возможность настроить плагин. Но, старайтесь использовать только необходимые параметры, как показано в этом примере получения твитов (плагин использует только один параметр «имя пользователя»).
$(selector).fetchTweets("jcutrell");
Такие плагины очень популярны среди разработчиков… он получает твиты, и обвертывает их в тег параграфа, при этом нужно ввести только имя пользователя.
5 - Выносите CSS указания в отдельный файл
Естественно, это касается только определенных плагинов… но, старайтесь все CSS указания выносить в отдельный файл. Так будет проще при создании UI.
Большинство плагинов содержат в комплекте картинки и CSS стили. Но не забывайте второй совет - документируйте CSS стили с картинками также. Разработчики, вряд ли желают просматривать код, чтобы найти то, что им нужно поменять.
Наиболее удобно использовать стилизацию основанную на class/ID доступе. Но классы и ID должны также быть доступными и описанными в документации, чтобы пользователю не приходилось определять, что там происходит.
6 - Предоставьте примеры использования вашего плагина
Если вы не можете предоставить примеры возможностей своего плагина, лучше и не начинайте писать его. Пользователи долго не будут смотреть на него, просто уйдут искать другой.
Это не сложно, ведь вы разработчик плагина. Не будьте ленивы. Вот хорошие идеи для примеров:
- «Hello World» пример - всегда удобно использовать в плагинах, которые работают с HTML и CSS.
- Расширенные примеры - предоставляют возможность увидеть все грани функциональности плагина. Примеры должны отображать максимальное количество опций и возможностей.
- Примеры интеграций - если ваш плагин имеет возможность использовать другие плагины. Обязательно покажите, как интегрировать другой плагин в код вашего.
7 - Пишите плагин, сопоставим с большинством версий jQuery
jQuery, как и любая хорошая библиотека, растет и развивается. Некоторые старые методы больше не доступны, некоторые новые вводятся. Хорошим примером этому является.on() метод, который решением «все в одном» для делегации событий. Если вы пишите плагин используя этот метод, люди, которые используют версию jQuery 1.6 будут обделены. Я не имею в виду, что ваш код должен содержать устаревшие методы, но в документации обязательно укажите используемую версию jQuery.
8 - Ведите Changelog
Наряду с обновлением кода плагина под новую версию jQuery, также необходимо контролировать и документировать все обновления. Наилучше делать это с помощью всем известного сервиса GitHub. Это публичный репозиторий, на котором можно хранить все версии плагина, changelog и другое.
9 - Пишите востребованный плагин
Давайте будем честными, некоторые плагины неудобные, есть такие, которые вообще нельзя назвать плагинами. Поэтому давайте писать востребованные плагины! Помните, миру не нужен еще один плагин слайдера, их и так предостаточно.
Если вы все таки решили написать плагин для социальной сферы разработчиков, найдите причину, по которой стоит его писать. Как мы любим выражаться: «Зачем изобретать колесо вновь»? Само собой, иногда новые и лучшие способы тех же вещей приветствуются. Но для этого должны быть вязкие практические причины.
10 - Предоставьте сжатую версию кода
Такой маленький, но очень разумный совет! Сжатая версия делает ваш плагин более востребованным. Разработчикам также важно знать, сколько будет «весить» ваш продукт.
Когда сжимаете код, не забывайте предоставлять не сжатую версию.
11 - Ваш код слишком заумный
Когда вы пишите плагин для jQuery, предполагается, что он будет использоваться другими… не так ли? По этой причине, код вашего плагина должен быть как можно лучше читаем. Если вы лепите все в одну строку или не семантично называете переменные, это создает трудности при чтении кода. Хорошо отформатированный код, это неплохое дополнение к документации. А насчет длинных названий переменных не волнуйтесь, ведь можно просто сжать код.
Если называете переменные «a» или «x» - это неправильно!
Также, старайтесь уменьшить число строк в каждой из функции. Так проще для понимания и более логично.
12 - Тестируйте
Надеюсь, вы всегда тестируете свой код, правда? Если нет, как вы можете публиковать его, если не уверены в работоспособности. Ручное тестирование всегда важно, но если вы обновляете страницу в браузере чтобы тестировать работоспособность плагина - это не правильно. Советую пользоваться такими инструментами, как - Qunit, Jasmine, Mocha.
Заканчивая мысли
Если вы собрались писать jQuery плагин, держите на виду эти советы. Может быть, я что-то пропустил. Если знаете, какими еще положительными качествами должен обладать хороший плагин, дайте знать в комментариях. Творческих вам успехов!
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows