easy

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

Галереи, параллакс, меню и всплывающие уведомления — обзор проверенных jQuery-плагинов.

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

1. Slideout.js

slideout.js.org

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

Отдельное спасибо разработчикам за то, что этот плагин весит всего 2 килобайта и не требует никаких дополнительных надстроек.

2. PhotoSwipe

photoswipe.com

Нужна красивая галерея на сайт? Ставьте PhotoSwipe — проверенную галерею с анимацией, множеством настроек и активным сообществом. Подойдёт, если вам нужно просто красиво разместить фото на сайте, чтобы их можно было листать, разворачивать на весь экран и начинать просмотр с любой картинки.

3. Toastr

codeseven.github.io/toastr/

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

4. SweetAlert

sweetalert.js.org

Меняет стандартные браузерные уведомления на стильные и заметные сообщения. Теперь пропустить их будет сложнее, а пользователь сразу поймёт, что он него что-то хотят. Чтобы понять, как это работает, сравните два уведомления: стандартное и SweetAlert:

Стандартное
SweetAlert

5. jQuery-Tabledit

markcell.github.io/jquery-tabledit

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

6. Skrollr

prinzhorn.github.io/skrollr

Лёгкий способ сделать эффект параллакса на странице — использовать Skrollr. Параллакс в общем случае — это когда что-то движется на переднем фоне быстрее, чем на заднем или на остальных. Эдакое псевдо-3D, только при скролле. Параллакс любят использовать производители смартфонов на заставках, а с этим плагином можно сделать в таком стиле целый сайт.

7. IntroJS

introjs.com

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

8. ScrollMagic

scrollmagic.io

Хитрый плагин с огромными возможностями настроек. Он закрепляет какой-то элемент страницы в определённом месте и включает анимацию в нужный момент. Нужный момент выбираете вы сами, и их может быть несколько на одной странице. Посмотрите пример, и вам станет понятно, насколько крут этот плагин.

9. FloatLabel.js

labs.mikemitchell.co.uk/FloatLabelJS/

Простой, но удобный плагин: он работает с полями ввода и следит за тем, когда вы начнёте туда что-то вводить. Как только начнёте — он делает из названия поля мини-заголовок и помещает его наверх:

10. jQuery GoUp!

dnlnrs.github.io/jquery-goup/

Самый простой плагин в обзоре. Кнопка просто возвращает вас наверх, в самое начало страницы. Когда лень скроллить.

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Что о вас на самом деле знают Google и Facebook (и все остальные)
Что о вас на самом деле знают Google и Facebook (и все остальные)

Если коротко — они знают о вас почти всё. Но с этим тоже можно что-то сделать.

medium
Недетская задача про детей
Недетская задача про детей

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

hard
Что такое искусственный интеллект
Что такое искусственный интеллект

В этой статье ни одной шутки про «Скайнет».

medium
Сможете ли вы сделать карьеру на удалёнке?
Сможете ли вы сделать карьеру на удалёнке?
easy
5 классных головоломок с Алиэкспресса
5 классных головоломок с Алиэкспресса

Не про программирование, но просто понравилось.

easy
Хитрые вопросы про JavaScript
Хитрые вопросы про JavaScript
easy
Разговор с директором по безопасности «Авито»
Разговор с директором по безопасности «Авито»

Конспект подкаста «Запуск завтра»

easy
Любая статья про новые продукты Apple
Любая статья про новые продукты Apple

Чтобы два раза не вставать

easy
Бесплатные хостинги. Да, бесплатные
Бесплатные хостинги. Да, бесплатные

Поднимайте сайт, закачивайте файлы и программируйте, что вам нужно. Это бесплатно.

medium
easy
[anycomment]
Exit mobile version