Сортування і фільтрація елементів за допомогою плагіна jQuery MixItUp

16

Від автора: дуже часто на сторінках сайту необхідно відображати велику кількість різноманітних елементів, що значно ускладнює пошук необхідної інформації користувачеві. В цьому випадку, обов’язково необхідно передбачити механізм фільтрації і сортування елементів за загальними ознаками, тому в даному уроці ми розглянемо плагін для бібліотеки jQuery під назвою MixItUp, який допоможе Вам реалізувати ефектну і анімовану фільтрацію контента. Функціонал плагіна досить великий, але при цьому він дуже простий у використанні і налаштуванні.

Сортування і фільтрація елементів за допомогою плагіна jQuery MixItUpСортування і фільтрація елементів за допомогою плагіна jQuery MixItUp

Установка плагіна MixItUp

Для початку перейдемо на офіційний сайт розробника плагіна MixItUp jQUery.

Сортування і фільтрація елементів за допомогою плагіна jQuery MixItUp

У лівій відкривається на бічній панелі міститься посилання для скачування останньої актуальної версії плагіна. Тому клацаємо по даному посиланню і зберігаємо архів у директорію зберігання скриптів JavaScript. Розпакувавши скачаний архів, з каталогу src, копіюємо в корінь файл jquery.mixitup.js – це і є цікавить нас бібліотека, яку, далі необхідно підключити до сайту.

Тепер зверніть увагу на тестовий сайт, який буде використовуватися для даного уроку.

Сортування і фільтрація елементів за допомогою плагіна jQuery MixItUp

Вихідний код файлу index.html, який формує дану сторінку.

MixItUp

Фільтр:
All
Категорія 1
Категорія 2
Категорія 3

Сортування:
Пряма
Зворотний

1
2
3
4
5
6
7
8

Як Ви бачите, я вже підключив бібліотеку jQuery, з віддаленого сервісу і порожній файл script.js, в якому ми будемо вести кодування на мові JavaScript.

Так само підключений файл style.css, який містить правила CSS для даної сторінки.

Зверніть увагу, що елементи, до яких в майбутньому буде застосована фільтрація і сортування — це блоки div з класом mix, які вкладено в елемент div id Container. Так само вище зазначеним елементам додано клас, за яким буде здійснюватися фільтрація. Приміром, у нас є три категорії, відповідно приналежність до кожної категорії певного блоку, визначають класи category-1, категорія-2 і category-3. Вони ж і будуть використовуватися для фільтрації елементів (тобто плагін, буде здійснювати вибірку даних елементів).

Блоки button з класами filter і sort – це елементи управління фільтрацією і сортуванням відповідно. Визначившись з розміткою – підключаємо скачаний плагін до сторінки:

Для коректної роботи плагіна, блоки з класом mix, повинні бути приховані, тобто для даних блоків використовуємо правило CSS display, зі значенням none (у вихідних матеріалах до даного уроку Ви зможете побачити повний код файлу зі стилями). На цьому установка плагіна завершена.

Робота з плагіном

Тепер, відкриваємо файл script.js і додамо наступний код:

$(function(){
$(«#Container»).mixItUp({
});
});

Тобто за допомогою бібліотеки jQuery вибираємо блок з ідентифікатором Container, в якому розташовані елементи для фільтрації і викликаємо на виконання метод mixItUp(), таким чином, запускаємо плагін в роботу.

На даному етапі, можна оновити інформацію в браузері ми побачимо, що цікавлять блоки відображаються на екрані з певною анімацією, а це означає, що ми на вірному шляху.

Тепер у файлі index.html до елементів button, які будуть управляти фільтрацією блоків, необхідно додати спеціальний атрибут data-filter, в значенні якого вказати клас, тих блоків, які будуть відображені на екрані. Тобто даний атрибут це параметр фільтрації. Код елементів button, для фільтрації буде виглядати наступним чином:

Фільтр:
All
Категорія 1
Категорія 2
Категорія 3

Спеціальне значення атрибута data-filter – all, скидає умова фільтрації і необхідно для відображення всіх елементів на екрані.

Для сортування елементів, до кожного з них, необхідно додати спеціальний атрибут data name, де name – це ім’я параметра, сортування, яке необхідно для роботи елементів управління. До прикладу, давайте створимо атрибут data-myorder. Значення даного атрибуту – це порядок сортування конкретного елемента. Тобто кінцевий варіант блоків, які підлягають сортуванню, буде наступний:

1
2
3
4
5
6
7
8

Для елементів керування сортуванням, необхідно додати атрибут data-sort, в значенні якого, вказуємо параметр сортування і напрямок сортування.

Сортування:
Пряма
Зворотний

Тепер можна перевірити результати роботи в браузері.

Сортування і фільтрація елементів за допомогою плагіна jQuery MixItUp

Основні налаштування плагіна

Налаштування MixItUp розділені на окремі групи, і повний їх список наведено на сторінці документації.

Сортування і фільтрація елементів за допомогою плагіна jQuery MixItUp

Група параметрів відповідають за вибірку елементів:

$(function(){
$(«#Container»).mixItUp({
selectors: {
target:’.mix’,
filter:’.filter’,
sort:’.sort’
}
});
});

Використовувані настройки:

target:’.mix’ – селектор елемента який буде обраний для фільтрації та сортування;

filter:’.filter’ – клас елемента керування, який буде виконувати фільтрацію, за вказаними параметрами;

sort:’.sort’ — клас елемента керування, який буде виконувати сортування по вказаним параметрам;

$(function(){
$(«#Container»).mixItUp({
load: {
filter:’.category-2′,
sort:’myorder:desc’
}
});
});

Група параметрів початкових уставок:

filter:’.category-2′ – початкова фільтрації елементів при завантаженні сторінки;

sort:’myorder:desc’ – початкова сортування елементів, при завантаженні сторінки.

$(function(){
$(«#Container»).mixItUp({
controls: {
enable:true,
activeClass:’on’
}
});
});

Група параметрів елементів управління:

enable:true – якщо передати true, елементи управління будуть включені;

activeClass:’on’ – клас, який буде додаватися активного елементу управління.

$(function(){
$(«#Container»).mixItUp({
animation: {
enable:true,
effects:’scale fade’,
duration:700
}
});
});

Група налаштувань анімаційних ефектів:

enable:true – якщо передати false, анімація буде заборонена;

effects:’scale fade’ – анімаційні ефекти, які будуть застосовуватися до вибраних елементів. Підтримувані значення: fade, scale, translateY, translateZ, rotateX, rotateY, rotateZ, stagger, translateX;

duration:700 – швидкість в мілісекундах, виконання анімаційних ефектів.

$(function(){
$(«#Container»).mixItUp({
callbacks: {
onMixLoad:function(state) {
//kod
},
onMixStart:function(state) {
//kod
},
onMixEnd:function() {
//kod
}
}
});
});

Параметри обробників подій, завдяки яким можливо описати функцію, код якої виконається при спрацьовуванні події:

onMixLoad – параметр, який дозволяє описати функцію, код якої виконається при спрацьовуванні події MixLoad – завантаження плагіна на сторінці;

onMixStart — параметр, який дозволяє описати функцію, код якої виконається при спрацьовуванні події MixStart – початок виконання одного з дій (фільтрування або сортування);

onMixEnd — параметр, який дозволяє описати функцію, код якої виконається при спрацьовуванні події MixEnd – завершення одного з дій (фільтрування або сортування).

На цьому даний урок завершено. Ми розглянули тільки основні налаштування плагіна MixItUp, якщо Вас зацікавив даний плагін, то на сторінці документації, Ви знайдете докладний опис не розглянутих нами налаштувань, а також інформацію щодо MixItUp API.

Всього Вам доброго і вдалого кодування!!!