Как написать плагин jQuery. Создание JQuery плагина
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: Содержимое Флип Plugin
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, но он все равно будет работать в старых браузерах.
В сегодняшней статье я расскажу, как создать простой плагин на 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 = "
Для того чтобы не путаться в дальнейшем, я создал локальную переменную $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 = "
Для того чтобы использовать данный плагин у себя на сайте необходимо между тегами
подключить саму библиотеку jQuery и сам плагин.10 лет назад, когда jQuery только зарождалась, браузерная экосистема была очень разношерстной и каждый из существовавших тогда продуктов по своему боролся со сложностью управления DOM-элементами. Амбициозной задачей, которую поставили перед собой разработчики jQuery, была разработка универсального подхода к решению этих проблем и создание API, который бы одинаково хорошо работал в любой ситуации.
Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.
Сам JavaScript сейчас совершенно зрелый продукт, хорошо документированный и поддерживаемый всеми современными браузерами. Современное браузерное сообщество тоже более консолидировано и, в большинстве случаев, можно быть уверенным, что если, скажем, страница корректно отображается в Crome, то так же она будет выглядеть и в Firefox. querySelectors тоже поддерживаются практически всеми современными браузерами.
Казалось бы, история развития jQuery движется к закату - зачем перегружать страницы и тратить лишние циклы процессора, если большинство задач можно решить стандартными средствами языка? С другой стороны, за такой долгий для компьютерной индустрии период разработано огромное количество решений, которые можно просто взять и использовать, здесь и сейчас.
Я думаю, этот выбор должен делать сам разработчик в каждой конкретной ситуации ориентируясь не на моду и тенденции, а на здравый смысл и перспективы развития своего творения.
В этом обзоре я собрал все известные мне бесплатные плагины jQuery , которые сейчас активно развиваются или которые хотя бы раз обновлялись за прошедший год. Некоторые из них я активно применял и применяю в своей практике, некоторые я знаю только поверхностно, но они впечатлили меня своими возможностями. Среди них есть исключительно неординарные, выполненные с большой фантазией. И даже если вы не найдете способ использовать их в своих проектах, быть может они вдохновят вас на создание своих собственных, еще более невероятных решений.
multiscroll.js
Интересное решение привлечь внимание посетителя - скроллинг страницы выполнен в виде двух панелей, одна из которых скользит вверх, а вторая вниз , открывая следующий блок. Также отлично работает на всех, даже весьма устаревших браузерах.
jquery.email-autocomplete.js
Электронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.
tinyDatePicker
В 5 кБ этого плагина втиснуты немаленькие возможности. Календари, планировщики, бронирование товаров и услуг - далеко не полный перечень, где можно использовать tinyDatePicker. Быстрый, легкий, масштабируемый - его можно легко интегрировать в Bootstrap или любой другой фреймворк.
ReadRemaining.js
Многим из нас всегда катастрофически не хватает времени. Я всегда завидовал людям, которые умеют правильно им распоряжаться. Наверное, к таким относится автор плагина ReadRemaining.js. Кому же еще могла прийти в голову мысль вывести рядом с текстом информацию о том, сколько времени вам понадобится, чтобы прочитать его . И по мере прокрутки текста пересчитывать это время, основываясь на скорости чтения конкретного пользователя.Весьма оригинальный плагин который, я думаю, понравится посетителям, если у вас много длинного текстового материала.
Tooltipster
Классическая всплывающая подсказка (tooltip) с большим набором функций и опций. Сам элемент может располагаться где угодно по отношению к родительскому элементу и содержать какие угодно элементы. Главное, не переборщить с его применением, используйте его только там где это действительно необходимо.
Addel
Несмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение - динамически добавлять или скрывать HTML-элементы , в первую очередь элементы форм. Управление гибкое и интуитивно понятное.
Chart.js
Активно развивающийся плагин, позволяющий выводить различные типы диаграмм (всего 8 типов, в том числе смешанные). Отлично работает на всех современных браузерах и имеет плавную и симпатичную анимацию при изменении данных.
jQuery Flip-Quote
Очень интересный плагин, который делает две вещи. Во-первых, вращает блоки цитат , присутствующие на странице, в тот момент когда блок становится видимым (отлично привлекает внимание). Во-вторых, при нажатии на этот блок происходит подсветка цитаты в тексте , что позволяет быстро найти ее в общем потоке материала. Оказывается, цитаты тоже можно сделать занимательными!
Algolia Places
Быстрый поиск с автодополнением почтовых адресов, городов, маршрутов и всего, что связано с локациями по всему миру благодаря интеграции с базой данных OpenStreetMap. Очень полезный плагин для интернет-магазинов.
HideSeek
Простой, но функциональный плагин «живого» поиска . Умеет производить поиск, основываясь на различных критериях, выполнять определенные действия после нахождения искомых данных и многое другое.
Timedropper
Существует огромное количество удобных решений для ввода определенного момента времени. Однако Timedropper выделяется среди них простотой и легким управлением. Изменение часов и минут при помощи этого забавного язычка действительно удобно. Он имеет несколько параметров настройки, таких как: формат времени (12 или 24-часовой) , цвет циферблата, теста, фона, а также возможность изменять показания часов и минут при помощи колесика мыши. Кстати, имеется аналогичный плагин для задания даты.
Lory
Слайдер , написанный на чистом JavaScript. Минималистический, но поддерживающий управление жестами, задание фиксированного элемента, отображение управляющих элементов-кнопок и одновременное отображение нескольких изображений, в том числе разной ширины.
CurrencyFormatter.js
Очень простенький и маленький скрипт, выполняющий отображение числовых значений в денежном формате . Добавляет точки, пробелы для разделения разрядов и символ валюты. Поддерживает 155 валют мира.
Shave.js
Javascript , который аккуратно обрежет текст , не помещающийся в контейнер заданной высоты. Занимает всего 1,5 кБ и не требует сторонних библиотек.
jQuery Linechart
Библиотека для построения диаграмм различных видов и довольно большим количеством исходных данных. Написан на HTML/CSS/JS , однако есть версия и на базе Angular.js
Freewall
Невероятно красивый jQuery плагин для создания плиточного интерфейса в самых разных стилях: Windows Metro, Pinterest, обычном плоском или иерархическом, с перетаскиваемыми и динамически добавляемыми элементами. Отлично работает как на мобильных браузерах, так и на десктопных, включая IE8. Действительно универсальный инструмент!
rowGrid.js
Крошечный плагин, который располагает изображения или другие элементы ровными рядами одинаковой высоты , подбирая размер и зазоры между ними так, что каждый ряд идеально вписывается в ширину окна. Правда, все объекты должны быть одинаковой высоты.
Slidebars
Slidebars добавляет на страницу сайта меню или боковую панель , которые скользящим движением появляются или скрываются по нажатию курсором на управляющую кнопку. Версия 2 этого плагина была полностью переписана и теперь может содержать неограниченное количество самых разных элементов. Имеет полноценный API, возможность подключения собственных callback-функций и подписку на события.
pagePiling.js
Очень напоминает рассмотренный в данном обзоре плагин multiscroll.js, но страница не разбивается на две панели, а смещается целиком. Можно изменять направление смещения и скорость. Хороший выбор для одностраничного сайта, который будет одинаково хорошо выглядеть и на мобильный устройствах и на больших экранах.
Animsition
Основной целью Animsition является воплощение в одном плагине большого и разнообразного набора различных транзитивных эффектов. Среди них затухание и проявление, вращение, отражение, зуммирование и т.п. (всего 58 штук).
ZooMove
Мне не нравится динамическое зуммирование изображений при наведении курсора - я нахожу этот эффект слишком раздражающим. Но если уж вы хотите его непременно использовать, то лучше взять для этой цели ZooMove. Такого гладкого и плавного масштабирования и скроллинга не даст ни один другой плагин.
Rippleria
Легковесный плагин, создающий волновой эффект (похожий на рябь на поверхности воды) на любом DOM-элементе: кнопке, элементе DIV, картинке. Очень легко настраивается и управляется.
Flickity
Быстрый, адаптивный и управляемый жестами слайдер . Внешне - довольно обычный, но с невероятно тщательно написанной и структурированной документацией. Полноценный, и продуманный API.
Unslider
Очень маленький и простой слайдер , имеющий несколько параметров, позволяющих разнообразить его поведение: различные направления движения (горизонтальное и вертикальное), циклическая (бесконечная) прокрутка, автозапуск.