Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3

Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3 Верстка

Сегодня урок о том как при помощи jQuery библиотеки MixItUp 3 сортировать и фильтровать элементы (блоки). Разберем основы и создадим продвинутое портфолио с фильтрацией по категориям.

Скачать исходники
Demo lite
Demo full

Установка MixItUp 3

Идем на оф. сайт разработчика MixItUp: kunkalabs.com/mixitup/. Прокручиваем немного страницу до ссылки для скачивания библиотеки.

скачать mixitup с оф сайта

Скачиваем библиотеку, распаковываем архив, находим в нем файл jquery.mixitup.js, копируем его в директорию со скриптами и подключаем к сайту

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

пример галереи с фильтром по категориям

Исходный код страницы следующий:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="container">
       <div class="controls">
            <button type="button" class="control" data-filter="all">Все</button>
            <button type="button" class="control" data-filter=".cat1">Категория 1</button>
            <button type="button" class="control" data-filter=".cat2">Категория 2</button>
            <button type="button" class="control" data-filter=".cat3">Категория 3</button>
            <button type="button" class="control" data-filter="none">Скрыть все</button>

            <button type="button" class="control" data-sort="default:asc">Asc</button>
            <button type="button" class="control" data-sort="default:desc">Desc</button>
        </div>

        <div class="container-filter">
            <div class="mix cat1">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/1-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat1">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/2-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat2">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/3-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat3">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/4-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat1">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/5-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat2">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/6-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat3">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/7-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>
            <div class="mix cat2">				
				<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/8-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
			</div>

            <div class="gap"></div>
            <div class="gap"></div>
            <div class="gap"></div>            
        </div>
    </div>
<script src="assets/vendor/mixitup/jquery.mixitup.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

Здесь подключен файл style.css, в котором содержатся CSS правила для данной страницы, сама библиотека —mixitup и script.js, в котором мы будем инициализировать запуск библиотеки.

Теперь по коду.

Кнопки управления

В блоке div с классом controls находятся кнопки управления фильтрацией и сортировкой.

Кнопки фильтрации

Элементы управления фильтром запрашиваются MixItUp при создании экземпляра на основе наличия data-filter атрибута в их разметке, а затем привязываются к событиям кликов. Значение data-filter атрибута каждого элемента управления определяет действие фильтрации элемента управления, которое должно быть допустимым селектором (например ‘.cat1’‘cat2’ и т. д.) Или значениями ‘all’ или ‘none’

Кнопки сортировки

Элементы управления сортировкой запрашиваются MixItUp при создании экземпляра на основе наличия data-sort атрибута в их разметке и привязки к событиям кликов. Значение data-sortатрибута каждого элемента управления (или строка сортировки) определяет поведение сортировки элемента управления и состоит из компонента «атрибут» и необязательного компонента «порядок» или строки ‘random’.

В моем примере используется Порядок по умолчанию — это порядок, в котором цели находятся в DOM, когда создается экземпляр MixItUp и индексы индексируются. Это соответствует строке сортировки ‘default:asc’. Если мы хотим изменить порядок по умолчанию, мы можем использовать это значение ‘default:desc’.

Сортируемые блоки

В блоке div с классом container-filter — находятся элементы (с классом mix) к котором будет применена фильтрация и сортировка . Так же есть блоки с классом gap — которые по сути являются заполнителями — использовать их не обязательно.

Работа с плагином

Открываем файл script.js, и добавляем следующий код:

var containerEl = document.querySelector('.container-filter');var mixer = mixitup(containerEl);

Этим кодом мы запускаем mixitup в работу и указываем ему на блок-обвертку с классом container-filter, в котором расположены элементы для фильтрации и сортировки.

Остается только оформить все при помощи css, добавив в него следующий код

body{overflow-x:hidden}
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.img-fluid{max-width:100%;height:auto}
.controls{margin:15px 0}
.control{position:relative;display:inline-block;cursor:pointer;font-size:18px;border:none}
.mixitup-control-active{background:#393939}
.mixitup-control-active[data-filter]:after{background:transparent}
.control[data-filter] + .control[data-sort]{margin-left:.75rem}
.mix,.gap{display:inline-block;vertical-align:top}
.mix{position:relative}
.mix:before{content:''}
/* Сетка */
/* 2 колонки */
.mix,.gap{width:calc(100%/2 - (((2 - 1) * 1rem) / 2))}
/* 3 колонки */
@media screen and (min-width: 541px) {
.mix,.gap{width:calc(100%/2 - (((2 - 1) * 1rem) / 2))}
}
/* 4 колонки */
@media screen and (min-width: 961px) {
.mix,.gap{width:calc(100%/2 - (((2 - 1) * 1rem) / 2))}
}

Создание продвинутого портфолио с сортировкой элементов

Скачать исходники
Demo full

По сути все тоже самое что описано выше — за основу берем все тот же код и стили, дополнительно подключаем fancybox 3: fancyapps.com/fancybox/3/, чтобы реализовать увеличение картинок по клику и шрифт fontawesome: fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=svg-with-js — чтобы вывести плюсик при наведении на картинку, ну и вообще иконки соц сетей и т.д. в дальнейшем. И остается немного переделать разметку блоков (которые у нас сортируются) и немного до оформить при помощи css.

Кто не знает как подключать библиотеки смотрите demo, код можно посмотреть нажав клавиши CTRL+U.

<div class="mix cat1">				
   <figure class="item-hover">
	<a href="https://web-revenue.ru/demo/images/1200x800/1-min.jpg" data-fancybox="gallery" data-caption="Caption for single image">
		<img class="img-fluid" src="https://web-revenue.ru/demo/images/451x300/1-min.jpg" alt="Сортировка и фильтрация элементов при помощи jQuery библиотеки MixItUp 3" />
		<i class="fas fa-plus"></i>
	</a>
	<div class="item-box-overlay-title">
		<p>Street Photography</p>
	</div>
   </figure>
</div>

Здесь мы по сути сделали просто немного более сложный вывод изображения (обернули в лишние блоки и классы) с учетом подключения новых библиотек и добавляем дополнительный css (ниже выше написанного)

figure.item-hover{position:relative;margin:0;padding:0;overflow:hidden}
.item-box-overlay-title{position:absolute;bottom:4px;background:#21252985;width:100%;right:0;left:0;padding:7px;text-align:center;display:none}
figure.item-hover:hover .item-box-overlay-title{display:block}
.fa-plus{background:#fff;border:none;width:70px!important;color:#343a40;padding:7px;font-size:50px;border-radius:21px 0;top:50%;margin-top:-50px;left:50%;margin-left:-38px;position:absolute;display:none}
figure.item-hover:hover a svg{display:block}


Получаем

продвинутое портфолио

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

увеличение изображений при клике

Таким образом можно сортировать все что угодно.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 3 оценки, среднее 2.33 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Ирина

    Алексей, спасибо за статью.
    Подскажите, есть ли плагин для фильтрации галереи картинок, созданной на гридах.
    Мне не удалось найти.

    Ответить
    1. Алексей автор

      Пожалуйста, аналогов хватает, вот например https://isotope.metafizzy.co/ — и он поинтереснее чем MixItUp 3

      Ответить
  2. Дмитрий

    Добрый день!
    Большое спасибо за статью. У меня, правда, есть проблемка — при клике на кнопку «Заказать звонок» (когда показаны все блоки), блоки исчезают(

    Ответить
    1. Алексей автор

      Скрипты скорее всего какие нибудь пересекаются

      Ответить