Фильтрация и сортировка на JS с помощью библиотеки MixItUp

Фильтрация и сортировка на JS с помощью библиотеки MixItUp

2 июня 2020 JavaScript

MixItUp — это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией.

MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором для адаптивных макетов. Библиотека совместима с inline-flow, percentages, media queries, flexbox и многим другим.

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

Пример работы фильтра

Начало работы

Чаще всего 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.

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
3D фотоэффект изображения на JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Автоопределение города по IP на сайте

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

Яндекс карта с управлением для сайта

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

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

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Добавить комментарий

*

code