Создание JQuery плагина. Часто используемые сокращения. jQuery плагин «MobilyBlocks» для отображения кругового меню

jQuery плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 2012 год. Для более удобного поиска все плагины разделены на следующие категории: Web Page Layout — плагины, плагины для навигации, Form Plugins, плагины для создания слайдеров, плагины для диаграмм и графиков, эффекты для изображений и другие. Также среди этих плагинов есть плагины, которые помогут вам в создании ваших адаптивных приложений.

Page Layout плагины

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

Новый плагин для адаптивных макетов.Freetile позволяет создавать элементы любого размера, при этом необходимость создания фиксированного размера столбцов сетки отпадает.

Gridster.JS jquery плагин для построения drag and drop — сетки. Также с помощью него можно динамично удалять и добавлять элементы из сетки.

Zoomooz.js - это простой в использовании jQuery-плагин для увеличения любого элемента веб-страницы. Вы можете легко добавить zoom-эффект, просто добавив класс «zoomTarget» к любому HTML-элементу. Увеличение можно сбросить, кликнув на страницу. Плагин был протестирован в Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera и Chrome.

Wookmark — плагин для создания динамичного многоколоночного шаблона.

jQuery HiddenPosition — плагин, который позволяет добавлять любой элемент, даже если он является скрытым.

Stellar.js — JQuery-плагин, который обеспечивает эффект параллакса для элементов.

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

Плагин для адаптивной типографики. Он позволяет вам использовать селектор, генерирующий идеальный размер шрифта.

Позволяет построить анимированные перемещения по сайту, включая все возможные трансформации

Плагины для навигации

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

stickyMojo – это легкий, быстрый и гибкий плагин «липучей» боковой панели на jQuery. Он работает с Firefox, Chrome, Safari и IE8 + (неплохо поддерживает старые версии IE).

ddSlick - плагин, который позволяет создавать выпадающие меню с изображениями и описаниями.

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

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

Формирующие плагины

Плагин позволяет определять уровень сложности пароля.

JQuery-плагин для визуализации процесса загрузки файлов. Он поддерживает drag&drop и создает моментальные превью для фотографий.

Плагин, который определяет и проверяет номера кредитных карт. Он позволяет вам определить тип кредитной карты.

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

Плагин, который проверяет ввод электронной почты на правильность по заранее подготовленному списку (сюда можно включить самые популярные почтовые сервисы mail.ru, yandrex.ru, gmail и т.п.).

Плагины для создания слайдеров и каруселей

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

iosSlider

iosSlider — плагин для адаптивного кроссбраузерного слайдера.

RSlider — полноэкраннный адаптивный слайдер. О н будет автоматически подстраиваться под ширину вашего экрана.

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

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

Adapter — легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов. В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox. Все 2D переходы были протестированы в IE6 + и других современных браузерах.

Непрерывная карусель с несколькими полезными возможностями. Она легко настраивается и поддерживает даже старые браузеры.

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

Sequence – это jQuery-плагин для прокрутки контента оригинальным образом и предоставляет вам полноценный контроль. Можно использовать любой тип контента; он будет прокручиваться бесконечно. Здесь используется семантическая разметка, а также поддерживаются адаптивные шаблоны и устройства, основанные на технологии touch.

Glisse.js — простая, адаптивная и легко настраиваемая JQuery-фото-галерея.

Плагины для диаграмм и графиков

Morris.js представляет собой облегченную библиотеку, которая использует JQuery и Raphaël, чтобы облегчить рисование графиков временных рядов.

JQuery Org Chart представляет собой плагин, который позволяет создавать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает плагин невероятно простым в использовании.

Плагины для типографики

Bacon.js является JQuery плагином, который позволяет обернуть текст вокруг кривой Безье или линии.

Textualizer - jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

SlabText — очень полезный JQuery-плагин, который построчно разбивает заголовки перед изменением размеров каждой строки, чтобы заполнить доступное пространство по горизонтали.

trunk8 — это плагин усечения текста в JQuery. Позволяет сократить большой блок текста на меньшую часть для предварительного осмотра.

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

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.

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

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

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

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

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

Начнем писать 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 позволяет Вам объединить Ваши самые удобные функции и любой часто повторяющийся код в одном месте, что позволит сэкономить время и сделать Ваше программирование еще более эффективным. Вот краткое резюме, того, что Вы должны иметь ввиду при разработке своего следующего плагина:

1. Всегда окружайте плагин в замыкание (function($){ // тут Ваш плагин })(jQuery);
2. Не нужно оборачивать this в теле плагина, это будет избыточным действием
3. Плагин должен возвращать this в своей функции, если плагин не должен возвращать какого-то конкретного значения, тогда он будет поддерживать цепочки вызовов
4. Вместо того, чтобы подавать все настройки сразу при запуске плагина, лучше определить их значения по умолчанию, т.о. малознакомый с плагином пользователь сразу сможет проверить его работу
5. Не создавайте для одного плагина больше одного имени в jQuery.fn
6. Всегда используйте пространство имен Вашего плагина при работе с данными и событиями.
7. jQuery.fn произносится как jQuery effin"

Рассказать друзьям

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

Постановка задачи

Прежде чем продолжить, давайте разобьем нашу задачу на несколько этапов:

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

Требования к плагину

Плагин должен иметь настройки:

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

Итак, с требованиями и задачами разобрались. Теперь можно смело переходить к реализации данного плагина на jQuery.

При создании плагина на jQuery необходимо код плагина поместить в отдельный файл, который бы имел название: jquery.название_плагина.js . Это такой стандарт. Так что лучше ему придерживаться.

Итак, наш плагин будет называться scroller , поэтому создадим пустой файлик с именем jquery.scroller.js

Для того чтобы создать плагин необходимо объекту jQuery.fn добавить новый метод, где имя метода — это название нашего плагина. Давайте взглянем на пример:

Как Вы успели заметить, вместо знака доллара $ мы используем слово jQuery . Это делается для того, чтобы наш плагин не конфликтовал с другими javascript библиотеками (например,Mootools, Prototype), которые также используют знак доллара $ . Если же Вам привычнее работать со знаком доллара $ , то тогда весь код плагина надо обвернуть в само вызывающееся замыкание:

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

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

(function($){ $.fn.scroller = function(options){ //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); }; }(jQuery);

Все параметры хранятся в переменной options . Для инициализации этой переменной мы используем фунцию $.extend() , первым аргументом которой указываем объект, с параметрами по умолчанию, второй аргумент - параметры, указанные пользователем. В нашем случае используется 2 параметра:

• img_src — полный путь к картинке на сервере, которая будет выводится в блоке внизу страницы. По умолчанию равен - "images/scrollup.png"
• height — высота прокрутки страницы, после которой будет появляться блок. По умолчанию равна — 1.5

Прежде чем продолжить, следует сказать несколько слов о контексте. Внутри плагина зарезервированное слово this это ссылка на объект jQuery , к которому вызывается плагин. Но когда, в коде плагина используются callback функции, то там this - это ссылка на нативный DOM элемент. Ошибки возникают тогда, когда разработчики лишний раз делают $(this) или наоборот забывают это делать. Ниже по тексту Вы все поймете.

Итак, движемся дальше. Так как наш плагин может быть вызван сразу к набору элементов ($(".class").scroller(); ), то нам надо этот момент учесть и обойти все элементы которые вошли в этот набор и к каждому применить наш плагин. Реализуется это очень просто. Используется функция each() . Давайте посмотрим на пример:

Как видите в данном случае this — это ссылка на объект jQuery, поэтому здесь не надо делать $(this) ! Кроме того наш плагин возвращает этот объект this , так как используется ключевое слово return . Это сделано для того, чтобы поддерживать цепочки вызовов jQuery. Ведь красота и лаконичность цепочек вызовов jQuery является одной из причин, почему jQuery так популярна. Поэтому для того, чтобы Ваш плагин поддерживал эти цепочки вызовов, Вы должны убедиться, что Ваш плагин возвращает этот this в своей главной функции

Теперь можно приступать к реализации самого функционала плагина. Давайте объявим несколько переменных для дальнейшей работы.

(function($) { $.fn.scroller = function(options) { //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); return this.each(function(){ //ссылка на нативный элемент DOM var $this = $(this), //Высота прокручиваемого элемента height = $this.height(), content = "

", scrollup = $(content).appendTo("body"); }); }; })(jQuery);

Для того чтобы не путаться в дальнейшем, я создал локальную переменную $this , которой присвоил объект jQuery. Также определили начальную высоту объекта, так как именно от неё будет зависеть, когда будет появляться блок внизу экрана. Кроме этого создали html разметку нашего блока и вставили его внутрь объекта, для которого вызывался плагин.

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

(function($) { $.fn.scroller = function(options) { //Значения по умолчанию options = $.extend({ img_src: "images/scrollup.png", height: 1.5, }, options); return this.each(function(){ var $this = $(this), height = $this.height(), content = "

", scrollup = $(content).appendTo("body"); $this.scroll(function(){ if($(this).scrollTop() >= height*options.height){ //показываем кнопку прокрутки вверх scrollup.fadeIn(); } else{ //прячем кнопку прокрутки вверх scrollup.fadeOut(); } }); //При клике на блок, //прокручиваем экран в начало страницы scrollup.bind("click",function(){ $("html,body").animate({scrollTop:0},500); }). hover(function(){ $(this).css("cursor","pointer"); }); }); }; })(jQuery);

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