Пишем свой плагин jquery. Плагины для создание различных эффектов для изображений

С момента появления jQuery прошло почти 10 лет и на сегодняшний день это самая популярная JavaScript-библиотека. Десять лет назад доступ в интернет был возможен через ограниченное число браузеров, спроектированных таким образом, чтобы свести к минимуму возможность манипулирования HTML DOM (Document Object Model). JQuery оказался палочкой-выручалочкой для многих разработчиков, стремившихся к одинаковому отображению содержимого сайтов во всех существующих браузерах. Развивавшие jQuery энтузиасты стремились объединить возможности браузеров и таким образом создать общий для всех интерфейс, который будет работать независимо от типа и версии браузера. Основная заслуга разработчиков состоит в том, что они создали новые интерфейсы API, которые были лучше «родных» браузерных и реализовали функции, которые не поддерживались программным интерфейсом браузера. Однако некоторые разработчики не склоны переоценивать роль jQuery в решении проблем кроссбраузерности и настаивают на том, что библиотека стала столь популярной благодаря реализации querySelectors. Как обычно, истина где-то посередине.

На сегодняшний день браузерная экосистема является не такой сложной, как это было 10 лет назад. Несмотря на то, что некоторые браузеры не могут реализовать все, что предлагает HTML5 API, все же у разработчиков в наше время гораздо меньше проблем с кроссбраузерностью и реализацией различных функций. Если сегодня что-то отлично работает в Chrome, то, вероятно, это также будет работать в Firefox или Edge. Основные элементы JavaScript наряду с querySelectors хорошо задокументированы и поддерживаются всеми производителями браузеров. Поэтому на первый взгляд может показаться, что те проблемы, которые решает jQuery, более таковыми не являются. Чистый JavaScript всегда будет быстрее, чем решение с использованием библиотеки, так что возникает вопрос: а нужно ли сегодня использовать технологию, которая в какой-то мере уже устарела? Цикл CPU является товаром, а время нет. Будет ли экономия 30 кБ оправданной, если придется писать код, тестировать его, если уже есть готовое решение?

Все это вопрос выбора. Кто-то стремится к совершенному коду, кто-то использует фрагменты кода, созданные другими разработчиками. Библиотека jQuery насчитывает тысячи отлично работающих и хорошо задокументированных плагинов, которые повышают производительность и позволяют реализовывать самые смелые идеи. Многие из этих плагинов к тому же совершенно бесплатны. Предлагаем вашему вниманию 10 лучших jQuery-плагинов, которые активно поддерживаются и регулярно обновляются их создателями.

Firewall это очень интересный кроссбраузерный jQuery-плагин, предназначенный для работы с макетами на основе модульной сетки. Он позволяет создавать впечатляющие анимационные эффекты с использованием возможностей SCC3 и хорошо работает с call back events. Если нужно создавать гибкие макеты с множеством изображений типа Pinterest, то Firewall является наилучшим решением для создания динамических сеток. Freewall работает практически во всех современных браузерах и даже в древнем IE8, что делает этот плагин действительно универсальным инструментом.

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

RowGrid.js – это простенький плагин, которые позволяет расположить изображения на сайте ровными рядами, точно так же, как это сделано в поиске по изображениям Google. Это модно, красиво и не слишком навязчиво. RowGrid.js расставляет изображения в рядах, ориентируясь на размер родительского элемента: он подбирает картинки таким образом, чтобы они гармонично смотрелись в пределах установленных границ, при этом некоторые элементы подвергаются масштабированию. Однако при работе с этим плагином нужно помнить, что все изображения должны быть одинаковыми по высоте, иначе плагин не будет работать и красивой произвольной сетки не получится.

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

Плагин pagePilings.js позволяет реализовать очень интересные эффекты прокрутки, которые особенно впечатляюще смотрятся на одностраничниках. Пользователь просматривает контент, которые перемещается вверх и вниз, а скрипт срезает верхние слои содержимого, тем самым реализуя слайдер. Использование плагина поможет создать незабываемый опыт пользователя. Направление и скорость прокрутки можно легко настроить – в этом плане плагин обладает очень большими возможностями. PagePilings.js полностью отзывчивый, он отлично работает на любом экране и хорошо отображается в большинстве современных браузеров.

Основное назначение jQuery-плагина - создание плавных переходов между страницами, что позволяет улучшить опыт пользователя. Этот небольшой плагин позволяет создавать плавные и красивые CSS-анимации, которые сопровождают смену страниц. Плагин имеет свыше 60 различных эффектов, включая такие распространенные, как затухание, проявление, поворот плоскости кадра, флип, зум и многое другое.

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

Rippleria является созданным на основе концепции Material Design плагином, который создает эффект волны при клики мышки по элементу. Эффект может применяться к различным объектам, например, к кнопкам, иконкам или изображениям. Плагин легко настраивается и хорошо работает во всех современных браузерах.

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

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

Как вы уже знаете, одним из главных качеств библиотеки 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) ;

Недавно, в процессе создания лендинга, столкнулся с проблемой - нужно было разместить «аккордион». Это даже не плагин, а просто набор функций 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);

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

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

1. Простой jQuery слайдер «Twirlie»

Компактный аккуратный слайдер.

2. jQuery портфолио с zoom-эффектом

Интересная реализация портфолио, созданная путем взаимосвязи двух jQuery плагинов: Cloud Zoom и Fancybox. При наведении курсора мыши на миниатюру появляется увеличенная копия области, находящейся под курсором. При нажатии на миниатюру открывается Fancybox галерея, с помощью которой можно просмотреть несколько полноразмерных изображений для данного проекта в портфолио.

3. Путеводитель по сайту с использованием jQuery

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

4. Мини-галерея на jQuery

Изображение увеличивается при наведении на него курсора мыши.

5. Симпатичный jQuery слайдер «Presentation Cycle»

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

6. Изумительный jQuery слайдер с объемным фоновым эффектом «Parallax Slider»

Слайдер изображений на jQuery. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

7. Смена цвета фона и текста с помощью jQuery

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

8. Элегантная Lightbox галерея «ppGallery»

9. jQuery слайд-шоу

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

10. Корзина заказов с использованием jQuery и PHP

Оригинальное решение для реализации корзины в интернет-магазине.

11. Мини-галерея jQuery «Touch-Gallery»

12. Выезжающее jQuery меню с изображениями

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

13. jQuery плагин «MobilyBlocks» для отображения кругового меню

14. jQuery плагин «MobilyNotes»

jQuery плагин для необычного отображения изображений или другого содержимого.

15. jQuery слайдер

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

16. jQuery слайдер изображений, плагин «slideJS»

Стильный jQuery слайдер, безусловно сможет украсить ваш проект.

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

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. мобильный телефон).