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, но он все равно будет работать в старых браузерах.
...
Пример, этой же галереи, но выполненной на фреймворке Bootstrap 3 :
Демо этой же галереи на Bootstrap 3 Создание галереи изображений подобной PinterestВторой вариант галереи изображений создадим на основе плагина Gridify . Данный плагин предназначен для создания сетки изображений как Pinterest.
Процесс создания этой галереи представим в виде следующих шагов:
Внимание: Существует несколько реализаций плагина gridify.js . В данном проекте выберем тот, который основывается на библиотеке jQuery.
$(function () { var options = { srcNode: "img", // grid items (class, node) margin: "15px", // margin in pixel width: "240px", // grid item width in pixel max_width: "", // dynamic gird item width resizable: true, // re-layout if window resize transition: "all 0.5s ease" // support transition for CSS3 }; $(".grid").gridify(options); });
2. Создание HTML кода галереи:
Просмотр изображения галереи будем осуществлять, как и в предыдущем примере, с помощью fancyBox.
Итоговый код галереи изображений подобной Pinterest для Bootstrap 4:
Bootstrap 4 - Создание адаптивной галереи изображений с помощью gridify.js
img {
padding: 4px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Пример этой же галереи на Bootstrap 3 .
В этом уроке мы рассмотрим создание макета страницы портфолио на основе плиточной сетки. Для создания сетки используются библиотеки и Dave DeSandro. Изображения, представленные в демо-версии, взяты с сайта Unsplash.com.
Masonry представляет собой сетку, базирующуюся на колонках. В отличие от сетки, созданной с помощью обтекания float , Masonry-сетка не имеет фиксированной высоты строк, что обеспечивает оптимальное использование пространства внутри веб-страницы, уменьшая любые ненужные пробелы. Такая сетка будет уместна на страницах-портфолио, страницах с галереями изображений, а также страницах с записями блога.
1. Метатеги и разделГалерея Masonry
2. Шапка страницыШапка страницы — раздел содержит следующие элементы-контейнеры:
— логотип ;
— главное меню
- ;
— кнопку для показа/скрытия главного меню .
Helen Parker personal photographer
3. Сетка с фотографиямиОсновная часть страницы состоит из блоков с фотографиями, для которых задан фильтр grayscale, придающий им эффект черно-белых фотографий. При наведении этот эффект исчезает.
Нижний колонтитул содержит сведения о копирайте и ссылки на социальные сети.
Copyright © 2018 Helen Parker
5. Файл style.css * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: "Muli", sans-serif; font-size: 14px; line-height: 1.5; color: #19121e; background-color: white; } ul { list-style: none; } a { text-decoration: none; outline: none; } .container { width: 100%; max-width: 1120px; padding: 0 10px; margin: 0 auto; } .row { margin: 0 -10px; } /*************************************************************/ /* HEADER */ /*************************************************************/ header { margin-bottom: 20px; } .header-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; position: relative; border-bottom: 2px solid #d9d9d9; } .logo-name { display: block; font-size: 26px; line-height: 1; font-family: "Radley", serif; text-transform: uppercase; color: #19121e; } .logo-description { position: relative; display: block; text-align: right; font-size: 10px; text-transform: uppercase; color: #a1787e; } .logo-description:before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: #a1787e; z-index: -1; } .logo-description span { padding-left: 10px; background-color: white; } #menu { position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 10; visibility: hidden; opacity: 0; background-color: white; transition: .3s linear; } #menu.show { visibility: visible; opacity: 1; } #menu li a { display: block; padding: 10px 0; position: relative; color: #19121e; font-size: 18px; } #menu li.current a { color: #a1787e; } .burger { position: relative; width: 28px; height: 19px; cursor: pointer; } .burger span { position: absolute; top: 8px; width: 28px; height: 3px; background-color: #19121e; transition: background-color .3s ease-in-out; } .burger span:before, .burger span:after { content: ""; position: absolute; width: 28px; height: 3px; background-color: #19121e; transform: rotate(0deg); transition: background-color .3s ease-in-out, transform .4s ease-in-out, top .4s ease-in-out; } .burger span:before { top: -8px; } .burger span:after { top: 8px; } .burger.close span { background-color: transparent; } .burger.close span:before { background-color: #a1787e; transform: rotate(45deg); top: 0; } .burger.close span:after { background-color: #a1787e; transform: rotate(-45deg); top: 0; } /*************************************************************/ /* PORTFOLIO GRID */ /*************************************************************/ .grid { margin-bottom: 20px; } .grid-item { width: 100%; padding: 10px; } .grid-item a { display: block; } .grid-item img { display: block; width: 100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: .5s ease-in-out; } .grid-item a:hover img { -webkit-filter: grayscale(0%); filter: grayscale(0%); } /*************************************************************/ /* FOOTER */ /*************************************************************/ .footer-row { padding: 20px 0; border-top: 2px solid #d9d9d9; } .footer-col { padding: 0 10px; } .footer-col:first-child { text-align: center; } .social-icons-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .social-icon { display: block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; margin-left: 12px; text-align: center; font-size: 15px; color: #a1787e; background-color: rgba(20,20,20,0); transform: scale(1); transition: .3s linear; } .social-icon:hover { transform: scale(1.2); background: #a1787e; color: #fff; } /*************************************************************/ /* MEDIA QUERIES */ /*************************************************************/ @media (min-width: 480px) { .grid, .footer-row { display: flex; } .grid-item, .footer-col { width: 50%; } .social-icons-wrapper { justify-content: flex-end; margin-top: 0; } .footer-col:first-child { text-align: left; } } @media (min-width: 768px) { .grid-item { width: 33.33333333333333%; } .burger { display: none; } .header-row { display: flex; align-items: center; justify-content: space-between; } #menu { display: flex; position: static; visibility: visible; opacity: 1; } #menu li { padding-left: 40px; } #menu li a { padding: 0; } #menu li a:before { content: ""; position: absolute; bottom: -4px; right: 0; left: auto; width: 0; height: 1px; z-index: 2; background-color: #19121e; transition: .25s cubic-bezier(.694,.048,.335,1) .15s; } #menu li a:hover:before, #menu li.current a:before { width: 100%; left: 0; } #menu li.current a:before { background-color: #a1787e; } } 6. СкриптыДля полноценной работы нужно подключить следующие скрипты:
Проблема с накладыванием изображений сетки решается с помощью плагина imagesloaded. Он определяет, когда изображение загружено и после этого строит сетку Masonry.
6.1. Файл main.js (function ($) { $(window).on("load", function () { var masonryGrid = $(".grid"); masonryGrid.imagesLoaded(function () { masonryGrid.masonry({ itemSelector: ".grid-item", percentPosition: true }); }); }); $(document).on("click", ".burger", function () { $(".burger").toggleClass("close"); $("#menu").toggleClass("show"); }); })(jQuery);Такой компонент может отлично вписаться в качестве фона или декоративного элемента в дизайне веб-сайта, так как у нас есть возможность отображать изображения и применять к ним переходы случайным образом.
Мы воспользуемся следующими дополнительными jQuery-плагинами:
* для большинства CSS-переходов
* для проверки браузерной поддержки соответствующих CSS-параметров
Красивые изображения в данном руководстве были представлены Шерманом Геронимо-Таном (), и распространяются они под лицензионным соглашением Creative Commons Attribution 2.0 Generic (CC BY 2.0).
HTML-структура будет включать простой неупорядоченный список с анкорными элементами и изображениями:
Для того чтобы вызвать плагин, просто используйте:
$("#ri-grid").gridrotator();
});
Не забудьте включить другие необходимые скрипты.
Опции
// number of rows
rows: 4,
// number of columns
columns: 10,
// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024: {
rows: 3,
columns: 8
},
w768: {
rows: 3,
columns: 7
},
w480: {
rows: 3,
columns: 5
},
w320: {
rows: 2,
columns: 4
},
w240: {
rows: 2,
columns: 3
},
// step: number of items that are replaced at the same time
// random ||
// note: for performance issues, the number should not be > options.maxStep
step: "random",
maxStep: 3,
// prevent user to click the items
preventClick: true,
// animation type
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType: "random",
// animation speed
animSpeed: 500,
// animation easings
animEasingOut: "linear",
animEasingIn: "linear",
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can"t" be < 300 ms
interval: 3000
При определении размера сетки вам следует учитывать тот факт, что в сетке у вас будет меньше изображений, чем вы помещаете в список. Давайте предположим, что у вас будет 50 изображений в списке и будут определено 5 колонок и 4 строки. Таким образом, мы получим сетку с 20 изображениями и возможностью переключиться на оставшиеся 30.
Ознакомьтесь с этими демо-файлами с тремя разными конфигурациями:
* : Случайные анимации / 55% ширины контейнера / 3 секунды между переключениями
