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

mixitup-8544122

2 июня 2020 JavaScript

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

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

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

mixitup-1-2234874 Пример работы фильтра

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

Чаще всего MixItUp применяется к container или target элементов, которые могут быть портфолио проектов, списком сообщений в блоге, выбором продуктов или любым видом пользовательского интерфейса, где фильтрация и/или сортировка будет полезной.

Сборка контейнера

По умолчанию MixItUp будет запрашивать у контейнера цель, соответствующее селектору .mix.

    
    
    
    

Цели могут быть отфильтрованы с использованием любого действительного селектора, например, .category-a и сортируются с помощью необязательных пользовательских атрибутов данных, например, data-order.

Управление

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

Элементы управления фильтра запрашиваются на основании наличия атрибута фильтра данных, значение которого должно быть all, none или допустимой строки селектора, например, .Category-а.

All
Category A
Category B
Category C

Управление сортировкой

Элементы управления сортировкой запрашиваются на основании наличия атрибута data-sort, значение которого принимает форму строки сортировки, состоящей из имени атрибута для сортировки, за которым следует необязательный порядок сортировки, разделенный двоеточиями, например, ‘order’, ‘order: asc’, ‘order: desc’.

Ascending
Descending
Random

Значения default и random также допустимы, причем default относится к исходному порядку целевых элементов в DOM во время создания экземпляра микшера.

Стилизация контейнера

Хотя MixItUp может быть добавлен поверх любого существующего макета CSS, рекомендуется использовать основанные на flexbox стили для плавающих элементов и устаревших каркасов сеток при работе с сеточными проектами по ряду причин.

Загрузка MixItUp

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

        ...
        
    

С помощью этого метода библиотечная функция 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.

Читайте также: