Фильтрация и сортировка на 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.
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее
Здравствуйте спасибо за информацию.