Лучшие jQuery плагины и JavaScript решения 2016 года

Лучшие jQuery плагины и JavaScript решения 2016 года

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

Насколько им это удалось судить вам, но спустя 10 лет своего существования, jQuery остается одной из самых популярных библиотек JavaScript.

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

Казалось бы, история развития jQuery движется к закату — зачем перегружать страницы и тратить лишние циклы процессора, если большинство задач можно решить стандартными средствами языка? С другой стороны, за такой долгий для компьютерной индустрии период разработано огромное количество решений, которые можно просто взять и использовать, здесь и сейчас.

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

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

multiscroll.js

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


jquery.email-autocomplete.js

Электронные адреса приходится вводить очень часто и, несмотря на то, что это всего лишь полтора десятка символов, часто возникает желание ускорить этот процесс. jquery.email-autocomplete.js имеет собственный список доменов популярных почтовых сервисов на основании которого он предлагает автодополнение адреса. Пользователь может принять эту подсказку, нажав клавишу Tab или стрелку вправо, или же продолжить вводить дальше вручную. Плагин хорошо работает и в мобильных версиях сайта. Однако, придется немного допилить плагин, чтобы он начал работать с отечественными почтовыми сервисами.

Смотрите также:
10 jQuery плагинов для измерения сложности пароля

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


tinyDatePicker

В 5 кБ этого плагина втиснуты немаленькие возможности. Календари, планировщики, бронирование товаров и услуг — далеко не полный перечень, где можно использовать tinyDatePicker. Быстрый, легкий, масштабируемый — его можно легко интегрировать в Bootstrap или любой другой фреймворк.

Смотрите также:
jQuery плагины форм для указания времени и даты

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Push.js

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

Лучшие jQuery плагины и JavaScript решения 2016 года


ReadRemaining.js

Многим из нас всегда катастрофически не хватает времени. Я всегда завидовал людям, которые умеют правильно им распоряжаться. Наверное, к таким относится автор плагина ReadRemaining.js. Кому же еще могла прийти в голову мысль вывести рядом с текстом информацию о том, сколько времени вам понадобится, чтобы прочитать его. И по мере прокрутки текста пересчитывать это время, основываясь на скорости чтения конкретного пользователя.

Весьма оригинальный плагин который, я думаю, понравится посетителям, если у вас много длинного текстового материала.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Tooltipster

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


TableExport.js

Здесь все ясно из названия. Плагин позволяет просто и быстро конвертировать HTML-таблицу в файл Exel, CSV или обычный текстовый. Для работы требуется плагин FileSaver.js.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Addel

Несмотря на созвучное название, этот плагин не имеет никакого отношения к певице Адель. Его название происходит от английских слов ADd-DELete (добавить и удалить) и отражает его назначение — динамически добавлять или скрывать HTML-элементы, в первую очередь элементы форм. Управление гибкое и интуитивно понятное.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Chart.js

Активно развивающийся плагин, позволяющий выводить различные типы диаграмм (всего 8 типов, в том числе смешанные). Отлично работает на всех современных браузерах и имеет плавную и симпатичную анимацию при изменении данных.

Смотрите также:
JavaScript библиотеки для создания круговых диаграмм

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


jQuery Flip-Quote

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Sharetastic

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

Смотрите также:
Конструкторы социальных кнопок для сайта

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Algolia Places

Быстрый поиск с автодополнением почтовых адресов, городов, маршрутов и всего, что связано с локациями по всему миру благодаря интеграции с базой данных OpenStreetMap. Очень полезный плагин для интернет-магазинов.

Лучшие jQuery плагины и JavaScript решения 2016 года


HideSeek

Простой, но функциональный плагин «живого» поиска. Умеет производить поиск, основываясь на различных критериях, выполнять определенные действия после нахождения искомых данных и многое другое.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Timedropper

Существует огромное количество удобных решений для ввода определенного момента времени. Однако Timedropper выделяется среди них простотой и легким управлением. Изменение часов и минут при помощи этого забавного язычка действительно удобно. Он имеет несколько параметров настройки, таких как: формат времени (12 или 24-часовой), цвет циферблата, теста, фона, а также возможность изменять показания часов и минут при помощи колесика мыши. Кстати, имеется аналогичный плагин для задания даты.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Choreographer-js

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Leaflet.js

Занимая всего 33 кБ, эта библиотека предоставляет практически все функции, необходимые для работы с картами, в том числе и на мобильных устройствах.

Смотрите также:
Сервисы для создания интерактивных карт

Лучшие jQuery плагины и JavaScript решения 2016 года


Lory

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

Лучшие jQuery плагины и JavaScript решения 2016 года


CurrencyFormatter.js

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

Лучшие jQuery плагины и JavaScript решения 2016 года


ARc

Своеобразный шаблон для проектирования интерфейсов в стиле Atomic Design.

Лучшие jQuery плагины и JavaScript решения 2016 года


egjs

Небольшой набор интересных и необычных элементов управления, построенных на jQuery.

Лучшие jQuery плагины и JavaScript решения 2016 года


Shave.js

Javascript, который аккуратно обрежет текст, не помещающийся в контейнер заданной высоты. Занимает всего 1,5 кБ и не требует сторонних библиотек.

Лучшие jQuery плагины и JavaScript решения 2016 года


jQuery Linechart

Библиотека для построения диаграмм различных видов и довольно большим количеством исходных данных. Написан на HTML/CSS/JS, однако есть версия и на базе Angular.js

Лучшие jQuery плагины и JavaScript решения 2016 года


Tabulator

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

Лучшие jQuery плагины и JavaScript решения 2016 года


baguetteBox.js

Написанный на чистом JavaScript lightbox с хорошей поддержкой мобильных устройств и управлением жестами.

Лучшие jQuery плагины и JavaScript решения 2016 года


Freewall

Невероятно красивый jQuery плагин для создания плиточного интерфейса в самых разных стилях: Windows Metro, Pinterest, обычном плоском или иерархическом, с перетаскиваемыми и динамически добавляемыми элементами. Отлично работает как на мобильных браузерах, так и на десктопных, включая IE8. Действительно универсальный инструмент!

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


rowGrid.js

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Slidebars

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

Смотрите также:
20 слайд-панелей навигации для сайта

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


pagePiling.js

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Animsition

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


ZooMove

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Rippleria

Легковесный плагин, создающий волновой эффект (похожий на рябь на поверхности воды) на любом DOM-элементе: кнопке, элементе DIV, картинке. Очень легко настраивается и управляется.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Flickity

Быстрый, адаптивный и управляемый жестами слайдер. Внешне — довольно обычный, но с невероятно тщательно написанной и структурированной документацией. Полноценный, и продуманный API.

Смотрите также:
4 Jquery слайдера с parallax эффектами

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Unslider

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Lightcase.js

Выдающийся lightbox с CSS3 анимацией. Работает с DIV, изображениями, текстом, flash-объектами, video и iframe. Пока не поддерживает jQuery 3, но разработчики обещают исправить это в ближайших релизах.

Смотрите также:
10 модальных окон на jQuery для адаптивного сайта

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


PhotoSwipe

Замечательная галерея изображений с управлением как клавиатурой на дестопных браузерах, так и жестами на мобильных. Имеется возможность установить задержку загрузки фотографий, пока полностью не загрузится сама страница. И все это удовольствие имеет размер всего 14 кБ.

Смотрите также:
7 адаптивных галерей изображений в виде слайдера

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Strip

Strip — это lightbox, который занимает некоторую область страницы, оставляя саму страницу не только частично видимой, но и доступной для взаимодействия с ней. Кроме того может одновременно работать и как слайдер. К тому же, наряду с изображениями, поддерживает и видеоконтент с Youtube и Vimeo.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Turntable.js

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Vide.js

Пожалуй, самый простой способ добавить фоновое видео на страницу сайта — это воспользоваться плагином Vide.js. Он работает на всех современных браузерах, начиная с IE9+. На iOS и Android, которые не всегда воспроизводят фоновое видео, будет показан стоп-кадр.

Смотрите также:
6 бесплатных jquery / html5 плагинов для реализации полноэкранного фонового видео

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Trianglify

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


LazeeMenu

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

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Web-ticker

Бегущая строка, похожая на те, которые часто можно увидеть на экране телевизора в выпусках новостей — последние события, биржевые котировки, погода… Да мало ли, что там можно разместить! Так, что если вам нравится такой способ подачи информации — возьмите Web-ticker на заметку.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


Inputmask

User experience в действии. Вы помните те времена, когда приходилось заново вводить в форму данные из-за ошибки. Причем ошибка обнаруживалась только после ответа сервера. Забудьте об этом! Inputmask не просто контролирует и отображает визуально правильность вводимых данных, он еще и препятствует введению неправильных. Попробуйте, например, ввести 13-й месяц в поле даты. Маски могут быть самые разные — даты, телефоны, e-mail и даже регулярные выражения.

jQuery плагины и JavaScript решения: Лучшие jQuery плагины 2016 года


ScrollReveal

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

Лучшие jQuery плагины и JavaScript решения 2016 года


Marginotes

Всплывающие подсказки (tooltip), отображаемые на полях рядом с абзацем. Интересное и оригинальное решение. Если вы не любитель jQuery, то имеется версия, не требующая этой библиотеки.

Лучшие jQuery плагины и JavaScript решения 2016 года


Loud Links

Java-скрипт, который позволяет «озвучить» ваш сайт — добавить звуковые эффекты на различные события. Использует аудио-элемент HTML5 и способен воспроизводить MP3 и OGG файлы.

Лучшие jQuery плагины и JavaScript решения 2016 года


Bricks.js

Молниеносный, в смысле скорости работы, плагин для создания плиточной верстки фиксированной ширины.

Лучшие jQuery плагины и JavaScript решения 2016 года


MediumEditor

Маленький (28кБ) и легкий inline редактор для изменения атрибутов текста непосредственно на странице. Позволяет подключать дополнения и различные скины.

Смотрите также:
10 Javascript WYSIWYG и Markdown визуальных редакторов

Лучшие jQuery плагины и JavaScript решения 2016 года


Philter

Philter предоставляет удобное и гибкое управление CSS-фильтрами при помощи HTML-атрибутов. Поставляется в виде плагина к jQuery или скрипта на чистом JavaScript.

Лучшие jQuery плагины и JavaScript решения 2016 года


SuperEmbed.js

Обнаруживает на странице встроенное видео и помещает его в адаптивный контейнер.

Лучшие jQuery плагины и JavaScript решения 2016 года


Substance

Полноценный текстовый редактор для онлайновых издательских систем.

Лучшие jQuery плагины и JavaScript решения 2016 года


List.js

Позволяет сортировать, фильтровать и производить поиск по элементам списков, таблиц и другим элементам HTML

Лучшие jQuery плагины и JavaScript решения 2016 года


jqGifPreview

Создает стоп кадр анимированного GIF-файла, точно так же, как это сделано в FaceBook.

Лучшие jQuery плагины и JavaScript решения 2016 года


Datedropper.js

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

Лучшие jQuery плагины и JavaScript решения 2016 года


jfMagnify

Плагин увеличительное стекло на базе jQuery. Способен увеличивать любой HTML-элемент, а не только изображение.

Лучшие jQuery плагины и JavaScript решения 2016 года


jQuery formBuilder

Быстрое и удобное создание форм — достаточно просто перетащить на форму требуемые элементы.

Лучшие jQuery плагины и JavaScript решения 2016 года


Popper.js

Несмотря на свой размер 4кБ эта библиотека-малютка создает эффектные и умные всплывающие подсказки (tooltip), которые могут быть расположены с любой стороны элемента, а также самостоятельно менять это положение в зависимости от расположения родительского элемента относительно границы страницы.

Лучшие jQuery плагины и JavaScript решения 2016 года


Image Blur Plugin

Легкий кросс-браузерный плагин jQuery для получения расфокусированного изображения.

Лучшие jQuery плагины и JavaScript решения 2016 года


InlineTweet.js

Превратить любой текст в Twitter-ссылку — дело одной секунды при помощи InlineTweet.js

Лучшие jQuery плагины и JavaScript решения 2016 года


iMissYou.js

iMissYou.js изменяет заголовок вкладки и favicon, когда пользователь переключается на другую вкладку.

Лучшие jQuery плагины и JavaScript решения 2016 года


SweetAlert2

Прекрасная замена стандартному окну, вызываемому функцией alert(). Имеет дополнительные параметры, которые делают его более наглядным и информативным.

Лучшие jQuery плагины и JavaScript решения 2016 года


Force.js

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

Лучшие jQuery плагины и JavaScript решения 2016 года


Bideo.js

Неплохая библиотека для добавления фонового видео на страницу вашего сайта.

Лучшие jQuery плагины и JavaScript решения 2016 года


Microlight.js

Небольшая, всего 2,2 кБ, библиотека для подсветки кода практически всех языков программирования. Указывать язык не нужно, библиотека сама определит его. Более этого, в одном блоке может быть даже несколько языков. Необычным является само выделение — вместо того, чтобы раскрашивать код как рождественскую елку выделение характерных элементов производится при помощи изменения начертания шрифта (полужирный, наклонный и т.п.)

Лучшие jQuery плагины и JavaScript решения 2016 года


flatpickr

Быстрый и функциональный элемент интерфейса для ввода даты, времени или и того и другого вместе.

Лучшие jQuery плагины и JavaScript решения 2016 года


anime.js

Гибкая и легкая библиотека различных анимационных эффектов, воздействующая на селекторы CSS, SVG, атрибуты DOM и другие JS-объекты.

Лучшие jQuery плагины и JavaScript решения 2016 года


Cleave.js

Плагин, форматирующий символы в любом поле <input/> в процессе набора. Это может быть поле для ввода даты, времени, номера кредитной карты, телефона и пр.

Смотрите также:
10 jQuery плагинов форм для ввода данных кредитных карт

Лучшие jQuery плагины и JavaScript решения 2016 года


Skippr

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

Лучшие jQuery плагины и JavaScript решения 2016 года


Lightgallery.js

Написанная на чистом JavaScript, без зависимости от сторонних библиотек этот lightbox и слайд-шоу в одном флаконе обладает внушительным набором функций: автовоспроизведение, зуммирование, возможность распространять ссылку на него в соцсетях или скачивать понравившиеся фотографии.

Лучшие jQuery плагины и JavaScript решения 2016 года


iziModal.js

Элегантная, гибкая и настраиваемая модальная форма, выполняющая разные функции — от замены классической alert(), до размещения в ней целых страниц и блоков
<iframe>
.

Лучшие jQuery плагины и JavaScript решения 2016 года
Напишите свой комментарий
comments powered by HyperComments