Фильтрация и сортировка на JS с помощью библиотеки MixItUp
18 февраля 2022 JavaScript
MixItUp — это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией.
MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором для адаптивных макетов. Библиотека совместима с inline-flow, percentages, media queries, flexbox и многим другим.
Профессиональная косметика из Израиля https://www.lecosm.com/
Примеры, документация, учебные пособия и многое другое вы найдете на официальном сайте проекта.
Содержание
Начало работы
Чаще всего MixItUp применяется к container или target элементов, которые могут быть портфолио проектов, списком сообщений в блоге, выбором продуктов или любым видом пользовательского интерфейса, где фильтрация и/или сортировка будет полезной.
Сборка контейнера
По умолчанию MixItUp будет запрашивать у контейнера цель, соответствующее селектору .mix.
<div class="container">
<div class="mix category-a" data-order="1"></div>
<div class="mix category-b" data-order="2"></div>
<div class="mix category-b category-c" data-order="3"></div>
<div class="mix category-a category-d" data-order="4"></div>
</div>Цели могут быть отфильтрованы с использованием любого действительного селектора, например, .category-a и сортируются с помощью необязательных пользовательских атрибутов данных, например, data-order.
Управление
Один из способов фильтрации и сортировки происходит при нажатии элементов управления. Вы можете использовать любой кликабельный элемент в качестве элемента управления, но для удобства рекомендуется <button type="button">.
Элементы управления фильтра запрашиваются на основании наличия атрибута фильтра данных, значение которого должно быть all, none или допустимой строки селектора, например, .Category-а.
<button type="button" data-filter="all">All</button> <button type="button" data-filter=".category-a">Category A</button> <button type="button" data-filter=".category-b">Category B</button> <button type="button" data-filter=".category-c">Category C</button>
Управление сортировкой
Элементы управления сортировкой запрашиваются на основании наличия атрибута data-sort, значение которого принимает форму строки сортировки, состоящей из имени атрибута для сортировки, за которым следует необязательный порядок сортировки, разделенный двоеточиями, например, ‘order’, ‘order: asc’, ‘order: desc’.
<button type="button" data-sort="order:asc">Ascending</button> <button type="button" data-sort="order:descending">Descending</button> <button type="button" data-sort="random">Random</button>
Значения default и random также допустимы, причем default относится к исходному порядку целевых элементов в DOM во время создания экземпляра микшера.
Стилизация контейнера
Хотя MixItUp может быть добавлен поверх любого существующего макета CSS, рекомендуется использовать основанные на flexbox стили для плавающих элементов и устаревших каркасов сеток при работе с сеточными проектами по ряду причин.
Загрузка MixItUp
Во-первых, загрузите JavaScript-библиотеку MixItUp, используя предпочтительный метод для вашего проекта. Самый простой способ загрузить MixItUp в ваш проект — это включить его через тег <script> перед закрывающим тегом </ body> на вашей странице. Скачать скрипт можно на официальном сайте. В папке вы найдете примеры использования библиотеки MixItUp с различными настройками.
...
<script src="/path/to/mixitup.min.js"></script>
</body>
</html>С помощью этого метода библиотечная функция MixItUp будет доступна через глобальную переменную mixitup.
Модуль импорт
Если вы создаете модульный проект JavaScript с помощью Webpack, Browserify или RequireJS, MixItUp можно установить с помощью выбранного вами менеджера пакетов (например, npm, jspm, yarn) и затем импортировать в любой из модулей вашего проекта.
npm install mixitup --save
// ES2015
import mixitup from 'mixitup';
// CommonJS
var mixitup = require('mixitup');
// AMD
require(['mixitup'], function(mixitup) {
});Создание микшера
Имея доступную библиотечную функцию mixitup(), вы можете теперь создать микшер в вашем контейнере, чтобы включить функцию MixItUp. Вызовите функцию библиотеки, передав в качестве первого параметра строку селектора или ссылку на элемент контейнера, и будет возвращен вновь созданный экземпляр микшера.
Создание микшера с помощью строки селектора:
var mixer = mixitup('.container');Создание микшера со ссылкой на элемент:
var mixer = mixitup(containerEl);
Теперь ваш микшер готов к взаимодействию через элементы управления (см. выше) или через API (см. методы API микшера в документации). Щелкните элемент управления или вызовите метод API, чтобы убедиться, что все работает правильно.
Конфигурация
Если вы хотите настроить функциональность вашего микшера, необязательный объект конфигурации может быть передан в качестве второго параметра функции mixitup. Если объект конфигурации не передан, будут использованы настройки по умолчанию.
Передача объекта конфигурации:
var mixer = mixitup(containerEl, {
selectors: {
target: '.blog-item'
},
animation: {
duration: 300
}
});Использование API
Если вы хотите взаимодействовать с вашим микшером через его API, ссылку на микшер, возвращаемую функцией библиотеки, можно использовать для вызова методов API.
Вызов метода API:
var mixer = mixitup(containerEl);
mixer.filter('.category-a');Так же вы можете использовать новый API-интерфейс набора данных MixItUp. Набор данных предназначен для использования в приложениях JavaScript на основе API и может использоваться вместо основанных на DOM методов, таких как .filter(), .sort(), .insert() и т.д. При использовании вставка, удаление, сортировка и разбиение на страницы может быть достигнуто исключительно через изменения в вашей модели данных, без необходимости взаимодействовать или напрямую запрашивать DOM.
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее
Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
В основном, модальное окно - это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени Читать далее
Здравствуйте спасибо за информацию.