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

Вот разметка для первых двух пунктов:

  <li class="mix-target undergraduate"> <a href="#">Economics<span>(U)</span></a> </li> <li class="mix-target graduate"> <a href="#">Pharmacology<span>(G)</span></a> </li> 

Далее мы определяем обработчики кликов, которые будут отображать элементы фильтра. Мы будем использовать элементы <button> для этого. Мы добавляем класс filter-btn и атрибут data-filter к каждому из них. Значение пользовательского атрибута должно соответствовать именам классов, которые были применены к целевым элементам. Ключевые слова all и none также являются возможными значениями.

Две наши кнопки фильтра показаны ниже:

 <button class="filter-btn" data-filter=".undergraduate">Undergraduate</button> <button class="filter-btn" data-filter=".graduate">Graduate</button> 

По умолчанию при первой загрузке MixItUp отображаются все целевые элементы. Это означает, что <button> с пользовательским атрибутом data-filter="all" сработала. Кроме того, библиотека применяет к этой кнопке класс programs-filter-btn-active . Это позволяет нам стилизовать выбранную опцию фильтрации / сортировки, чтобы указать, что она была выбрана.

Вот как мы будем стилизовать его в нашей демонстрации:

 .programs button.programs-filter-btn-active, .programs button.programs-sort-btn-active { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent; background: #3a9fbf; color: white; } 

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

Давайте теперь продолжим сортировку.

Сортировка

Первое, что нам нужно сделать, — это определить атрибуты, по которым мы хотим отсортировать. В нашем проекте это атрибуты order и year . В качестве следующего шага мы используем их имена для применения пользовательских атрибутов ( data-order и data-year ) к целевым элементам. Значения этих пользовательских атрибутов зависят от порядка сортировки, который мы хотим достичь.

HTML для двух элементов будет выглядеть так:

 <li class="mix-target undergraduate" data-order="5" data-year="4"> <a href="#">Economics<span>(U)</span></a> </li> <li class="mix-target graduate" data-order="14" data-year="2"> <a href="#">Pharmacology<span>(G)</span></a> </li> 

На этом этапе мы определяем элементы <button> как обработчики sort-btn и sort-btn класс sort-btn и атрибут data-sort к каждому из них. Значение этого атрибута должно использовать следующее соглашение:

 <button data-sort="order:asc"> 

Таким образом, у нас есть атрибут для сортировки, тогда в качестве значения у нас есть тип заказа, за которым следует двоеточие вместе с индикатором «asc» или «desc».

Этот атрибут также принимает в качестве значений default и random ключевые слова. Еще одна интересная вещь: мы можем сортировать, используя несколько атрибутов одновременно.

Две кнопки сортировки, которые используются в нашем примере, показаны ниже:

 <button class="sort-btn" data-sort="order:asc">Ascending</button> <button class="sort-btn" data-sort="year:desc order:desc">Descending <span class="multi">(Multi)</span></button> 

При первой загрузке MixItUp срабатывает кнопка с атрибутом data-sort="default:asc" . Тем не менее, элементы сортируются в зависимости от их внешнего вида DOM. Как и кнопка фильтра по умолчанию, эта кнопка получает активный класс ( programs-sort-btn-active ).

Теперь, когда мы рассмотрели основные функции библиотеки, пришло время посмотреть, как мы можем ее инициализировать.

Параметры настройки

Чтобы включить функциональность MixItUp 3 в нашей демонстрации, мы используем фабричную функцию mixitup и передаем ей два параметра:

1. Селектор, который представляет наш контейнер
2. и объект конфигурации, который переопределяет поведение по умолчанию MixItUp.

Вот код:

 mixitup('#mix-wrapper', { load: { sort: 'order:asc' /* default:asc */ }, animation: { effects: 'fade rotateZ(-180deg)', /* fade scale */ duration: 700 /* 600 */ }, classNames: { block: 'programs', /* mixitup */ elementFilter: 'filter-btn', /* control */ elementSort: 'sort-btn' /* control */ }, selectors: { target: '.mix-target' /* .mix */ } }); 

Давайте подробнее рассмотрим наши настройки:

1. Во-первых, когда библиотека загружается, мы меняем active кнопку сортировки по умолчанию.
2. Далее мы идентифицируем различные анимационные эффекты для целевых элементов.
3. Наконец, мы добавляем пользовательские классы к целевым элементам, фильтруем и сортируем кнопки. Так, например, когда элемент управления фильтра становится активным, к нему добавляется класс programs-filter-btn-active вместо общего класса по умолчанию mixitup-control-active .

Примечание. Исходные значения по умолчанию указаны в комментариях.

Стоит отметить, что mixitup фабрики mixitup возвращает экземпляр MixItUp, которым мы можем манипулировать, используя его методы API .

Вы можете посмотреть этот пример кода в действии в полной демонстрации , которую вы можете попробовать ниже: