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

Page Layout плагины

equalize.js 

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

Freetile.js

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

gridster.js

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

Zoomooz.js 

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

Wookmark  

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

JQuery HiddenPosition

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

Stellar.js

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

turn.js

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

 Responsive Measure 

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

 jQuery Scroll Path 

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

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

HorizontalNav 

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

stickyMojo

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

ddSlick

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

jQuery Collapse 

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

jQuery Accordion 

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

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

jQuery Complexify

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

jQuery File Upload

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

 jQuery Credit Card Validator

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

 Filtrify 

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

 MAILCHEC

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

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

Responsive Carousel

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

iosSlider 

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

RSlider

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

 Fresco

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

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

 Adaptor

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

 rcarousel

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

 Rhinoslider

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

Sequence.js

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

Glisse.js

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

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

Morris.js

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

jQuery Org Chart

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

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

Bacon

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

 Textualizer

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

 slabText

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

trunk8

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

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

tiltShift.js

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

 jQuery Picture

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

 ImageMapster

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

 Responsive Img

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

 Backstretch

Backstretch — простой плагин, который позволяет добавлять фоновое изображение изображение на любую страницу.

И другие...

jQuery Transit

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

noty

Noty — это jQuery плагин, с помощью которого без особых проблем и сложностей можно легко на своем сайте или блоге создать уведомления типа: information, error, alert, success, warning, или просто заменить стандартные уведомления на сайте, при регистрации например. Абсолютно каждое уведомление можно настроить, чтобы оно выводилось поочередно.

 jQuery Map Marker

JQuery-плагин позволяет легко помещать  маркеры на карте  сайта с помощью Google Map API V3.

 jHERE

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

 jQuery Vector Maps

Jплагин, который использует Scalable Vector Graphics (SVG) для рендера векторных карт. Онработает во всех браузерах, поддержка в старых версиях IE 6-8 осуществляется через VML. 

 SocialCount

Простой в использовании JQuery плагин для социальных виджетов сетей. В настоящее время он поддерживает Facebook, Twitter и Google+. 

 Tooltipster

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

 BigVideo.js

BigVideo.js - jQuery плагин, который упрощает адаптирование фонового видео на веб-страницу. Вы можете использовать одно или несколько видео или использовать плагин в качестве проигрывателя, с отображением плей-листа.

Calendario

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

Автор - Speckyboy Editors

Перевод — Дежурка.

Вас также могут заинтересовать:

• Полезные плагины для WordPress
• Полезные jQuery плагины для адаптивного дизайна