2 июня 2020 JavaScript
MixItUp — это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией.
MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором для адаптивных макетов. Библиотека совместима с inline-flow, percentages, media queries, flexbox и многим другим.
Примеры, документация, учебные пособия и многое другое вы найдете на официальном сайте проекта.
Пример работы фильтра
Начало работы
Чаще всего 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.
