10 лет назад, когда jQuery только зарождалась, браузерная экосистема была очень разношерстной и каждый из существовавших тогда продуктов по своему боролся со сложностью управления DOM-элементами. Амбициозной задачей, которую поставили перед собой разработчики jQuery, была разработка универсального подхода к решению этих проблем и создание API, который бы одинаково хорошо работал в любой ситуации.
Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.
Сам JavaScript сейчас совершенно зрелый продукт, хорошо документированный и поддерживаемый всеми современными браузерами. Современное браузерное сообщество тоже более консолидировано и, в большинстве случаев, можно быть уверенным, что если, скажем, страница корректно отображается в Crome, то так же она будет выглядеть и в Firefox. querySelectors тоже поддерживаются практически всеми современными браузерами.
Казалось бы, история развития jQuery движется к закату - зачем перегружать страницы и тратить лишние циклы процессора, если большинство задач можно решить стандартными средствами языка? С другой стороны, за такой долгий для компьютерной индустрии период разработано огромное количество решений, которые можно просто взять и использовать, здесь и сейчас.
Я думаю, этот выбор должен делать сам разработчик в каждой конкретной ситуации ориентируясь не на моду и тенденции, а на здравый смысл и перспективы развития своего творения.
В этом обзоре я собрал все известные мне бесплатные плагины jQuery , которые сейчас активно развиваются или которые хотя бы раз обновлялись за прошедший год. Некоторые из них я активно применял и применяю в своей практике, некоторые я знаю только поверхностно, но они впечатлили меня своими возможностями. Среди них есть исключительно неординарные, выполненные с большой фантазией. И даже если вы не найдете способ использовать их в своих проектах, быть может они вдохновят вас на создание своих собственных, еще более невероятных решений.
multiscroll.js
Интересное решение привлечь внимание посетителя - скроллинг страницы выполнен в виде двух панелей, одна из которых скользит вверх, а вторая вниз , открывая следующий блок. Также отлично работает на всех, даже весьма устаревших браузерах.
jquery.email-autocomplete.js
Электронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.
tinyDatePicker
В 5 кБ этого плагина втиснуты немаленькие возможности. Календари, планировщики, бронирование товаров и услуг - далеко не полный перечень, где можно использовать tinyDatePicker. Быстрый, легкий, масштабируемый - его можно легко интегрировать в Bootstrap или любой другой фреймворк.
ReadRemaining.js
Многим из нас всегда катастрофически не хватает времени. Я всегда завидовал людям, которые умеют правильно им распоряжаться. Наверное, к таким относится автор плагина ReadRemaining.js. Кому же еще могла прийти в голову мысль вывести рядом с текстом информацию о том, сколько времени вам понадобится, чтобы прочитать его . И по мере прокрутки текста пересчитывать это время, основываясь на скорости чтения конкретного пользователя.Весьма оригинальный плагин который, я думаю, понравится посетителям, если у вас много длинного текстового материала.
Tooltipster
Классическая всплывающая подсказка (tooltip) с большим набором функций и опций. Сам элемент может располагаться где угодно по отношению к родительскому элементу и содержать какие угодно элементы. Главное, не переборщить с его применением, используйте его только там где это действительно необходимо.
Addel
Несмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение - динамически добавлять или скрывать HTML-элементы , в первую очередь элементы форм. Управление гибкое и интуитивно понятное.
Chart.js
Активно развивающийся плагин, позволяющий выводить различные типы диаграмм (всего 8 типов, в том числе смешанные). Отлично работает на всех современных браузерах и имеет плавную и симпатичную анимацию при изменении данных.
jQuery Flip-Quote
Очень интересный плагин, который делает две вещи. Во-первых, вращает блоки цитат , присутствующие на странице, в тот момент когда блок становится видимым (отлично привлекает внимание). Во-вторых, при нажатии на этот блок происходит подсветка цитаты в тексте , что позволяет быстро найти ее в общем потоке материала. Оказывается, цитаты тоже можно сделать занимательными!
Algolia Places
Быстрый поиск с автодополнением почтовых адресов, городов, маршрутов и всего, что связано с локациями по всему миру благодаря интеграции с базой данных OpenStreetMap. Очень полезный плагин для интернет-магазинов.
HideSeek
Простой, но функциональный плагин «живого» поиска . Умеет производить поиск, основываясь на различных критериях, выполнять определенные действия после нахождения искомых данных и многое другое.
Timedropper
Существует огромное количество удобных решений для ввода определенного момента времени. Однако Timedropper выделяется среди них простотой и легким управлением. Изменение часов и минут при помощи этого забавного язычка действительно удобно. Он имеет несколько параметров настройки, таких как: формат времени (12 или 24-часовой) , цвет циферблата, теста, фона, а также возможность изменять показания часов и минут при помощи колесика мыши. Кстати, имеется аналогичный плагин для задания даты.
Lory
Слайдер , написанный на чистом JavaScript. Минималистический, но поддерживающий управление жестами, задание фиксированного элемента, отображение управляющих элементов-кнопок и одновременное отображение нескольких изображений, в том числе разной ширины.
CurrencyFormatter.js
Очень простенький и маленький скрипт, выполняющий отображение числовых значений в денежном формате . Добавляет точки, пробелы для разделения разрядов и символ валюты. Поддерживает 155 валют мира.
Shave.js
Javascript , который аккуратно обрежет текст , не помещающийся в контейнер заданной высоты. Занимает всего 1,5 кБ и не требует сторонних библиотек.
jQuery Linechart
Библиотека для построения диаграмм различных видов и довольно большим количеством исходных данных. Написан на HTML/CSS/JS , однако есть версия и на базе Angular.js
Freewall
Невероятно красивый jQuery плагин для создания плиточного интерфейса в самых разных стилях: Windows Metro, Pinterest, обычном плоском или иерархическом, с перетаскиваемыми и динамически добавляемыми элементами. Отлично работает как на мобильных браузерах, так и на десктопных, включая IE8. Действительно универсальный инструмент!
rowGrid.js
Крошечный плагин, который располагает изображения или другие элементы ровными рядами одинаковой высоты , подбирая размер и зазоры между ними так, что каждый ряд идеально вписывается в ширину окна. Правда, все объекты должны быть одинаковой высоты.
Slidebars
Slidebars добавляет на страницу сайта меню или боковую панель , которые скользящим движением появляются или скрываются по нажатию курсором на управляющую кнопку. Версия 2 этого плагина была полностью переписана и теперь может содержать неограниченное количество самых разных элементов. Имеет полноценный API, возможность подключения собственных callback-функций и подписку на события.
pagePiling.js
Очень напоминает рассмотренный в данном обзоре плагин multiscroll.js, но страница не разбивается на две панели, а смещается целиком. Можно изменять направление смещения и скорость. Хороший выбор для одностраничного сайта, который будет одинаково хорошо выглядеть и на мобильный устройствах и на больших экранах.
Animsition
Основной целью Animsition является воплощение в одном плагине большого и разнообразного набора различных транзитивных эффектов. Среди них затухание и проявление, вращение, отражение, зуммирование и т.п. (всего 58 штук).
ZooMove
Мне не нравится динамическое зуммирование изображений при наведении курсора - я нахожу этот эффект слишком раздражающим. Но если уж вы хотите его непременно использовать, то лучше взять для этой цели ZooMove. Такого гладкого и плавного масштабирования и скроллинга не даст ни один другой плагин.
Rippleria
Легковесный плагин, создающий волновой эффект (похожий на рябь на поверхности воды) на любом DOM-элементе: кнопке, элементе DIV, картинке. Очень легко настраивается и управляется.
Flickity
Быстрый, адаптивный и управляемый жестами слайдер . Внешне - довольно обычный, но с невероятно тщательно написанной и структурированной документацией. Полноценный, и продуманный API.
Unslider
Очень маленький и простой слайдер , имеющий несколько параметров, позволяющих разнообразить его поведение: различные направления движения (горизонтальное и вертикальное), циклическая (бесконечная) прокрутка, автозапуск.
Lightcase.js
Выдающийся lightbox с CSS3 анимацией . Работает с DIV, изображениями, текстом, flash-объектами, video и iframe. Пока не поддерживает jQuery 3, но разработчики обещают исправить это в ближайших релизах.
PhotoSwipe
Замечательная галерея изображений с управлением как клавиатурой на дестопных браузерах, так и жестами на мобильных. Имеется возможность установить задержку загрузки фотографий, пока полностью не загрузится сама страница. И все это удовольствие имеет размер всего 14 кБ.
Strip
Strip - это lightbox, который занимает некоторую область страницы, оставляя саму страницу не только частично видимой, но и доступной для взаимодействия с ней. Кроме того может одновременно работать и как слайдер. К тому же, наряду с изображениями, поддерживает и видеоконтент с Youtube и Vimeo .
Turntable.js
Невероятно эффектный подход к демонстрации продукта, особенно если это физический объект. Фактически, плагин очень простой и всего лишь демонстрирует набор изображений. Однако благодаря возможности управлять процессом при помощи колеса мыши или жестов на экране при условии, что набор представляет собой изображения одного объекта, снятого с разных углов зрения у зрителя возникает полная иллюзия его вращения.
Vide.js
Пожалуй, самый простой способ добавить фоновое видео на страницу сайта - это воспользоваться плагином Vide.js. Он работает на всех современных браузерах, начиная с IE9+. На iOS и Android, которые не всегда воспроизводят фоновое видео, будет показан стоп-кадр.
Trianglify
Если вы не хотите нагружать страницу фоновым видео, а статическое изображение кажется банальным, попробуйте триангулярность ! Это уникальные геометрические треугольные узоры , которые придадут некую индивидуальность вашему дизайну. Плагин позволяет менять цвет, размер ячеек и дисперсию. Вы даже сможете написать собственную реализацию алгоритма и использовать его в Trianglify.
LazeeMenu
Если у вас на сайте большое иерархическое меню, которое вы хотите сохранить простым и понятным то LazeeMenu несомненно пригодится вам. Он преобразует вложенные ненумерованные списки в удобное выпадающее меню .
Web-ticker
Бегущая строка , похожая на те, которые часто можно увидеть на экране телевизора в выпусках новостей - последние события, биржевые котировки, погода… Да мало ли, что там можно разместить! Так, что если вам нравится такой способ подачи информации - возьмите Web-ticker на заметку.
Inputmask
User experience в действии. Вы помните те времена, когда приходилось заново вводить в форму данные из-за ошибки. Причем ошибка обнаруживалась только после ответа сервера. Забудьте об этом! Inputmask не просто контролирует и отображает визуально правильность вводимых данных , он еще и препятствует введению неправильных. Попробуйте, например, ввести 13-й месяц в поле даты. Маски могут быть самые разные - даты, телефоны, e-mail и даже регулярные выражения .
А теперь пора выделить то, что, по нашему мнению, является лучшими плагинами jQuery этого года. Их всегда появляется множество, но мы считаем, что эти выделяются из остальных с точки зрения функциональности.
Картинки в статье ведут на демонстрационные примеры и страницы плагинов.
jQuery 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. мобильный телефон).
Плагинов для интеграции в ваших проектах. В заметке представлены множество галерей, слайдеров, меню и других плагинов.
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.
Далее, описывая правила создания собственных плагинов мы будем реализовывать отдельный полноценный плагин в качестве примера. Его функциональность будет состоять в добавлении нового поведения для выбранных элементов — изменение цвета при наведении курсора. Назовем плагин 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 плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 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, но он все равно будет работать в старых браузерах.
