Налаштування та застосування Isotope - jQuery плагіна для управління групою блоків (сортування,
Якщо ви не чули раніше про Isotope, то ви багато втратили - цей плагін по-справжньому багатофункціональний - тут вам і фільтрація блоків, і сортування, і модель розташування блоків. Давайте вивчимо детальніше, як це все працює.
Фільтрування
Для розгляду роботи цієї функції створимо html-документ, до якого підключимо два скрипти: jQuery та isotope.pkgd.min.js (його можна завантажити на офіційному сайті)
HTML-код складатиметься із двох частин.
Перша – це кнопки управління. Укладені вони в div з і div з , надалі ці id використовуватимуться скриптом. Також для кнопок задані атрибути data-filter, які містять класи елементів, що фільтруються. Зверніть увагу, у першої кнопки за умовчанням вказаний клас is-checked , який визначає яка кнопка активна в даний момент.
Інші класи ( button, button-group ) не відіграють істотну роль і служать для стилізації зовнішнього вигляду.
І друга частина - самі блоки для фільтрації, залишимо їх такими ж, як у авторів Isotope, у вигляді елементів таблиці Менделєєва. Кожен елемент div класу item, також має інший клас, яким він фільтруватися (відповідно .nonmetal, .metal, .transition).
class = "name" > Mercury
class = "symbol" > Hg
class = "number" > 80
class = "weight" > 200.59
class = "name" > Tellurium
class = "symbol" > Te
class = "number" > 52
class = "weight" > 127.6
class = "name" > Bismuth
class = "symbol" > Bi
class = "number" > 83
class = "weight" > 208.980
class = "name" > Lead
class= "символ" > Pb
клас = "номер" > 82
клас = "вага" > 207.2
class = "name" > золото
клас = "символ" > Au
клас = "номер" > 79
клас = "вага" > 196,967
class = "name" > Калій
клас = "символ" > К
клас = "номер" > 19
клас = "вага" > 39,0983
class = "name" > натрію
клас = "символ" > Na
клас = "номер" > 11
клас = "вага" > 22,99
class = "name" > Кадмій
клас = "символ" > Cd
клас = "номер" > 48
клас = "вага" > 112,411
class = "name" > Кальцій
клас = "символ" > прибл
клас = "номер" > 20
клас = "вага" > 40,078
class = "name" > Реній
клас = "символ" > Re
клас = "номер" > 75
клас = "вага" > 186,207
class = "name" > Талій
клас = "символ" > Tl
клас = "номер" > 81
клас = "вага" > 204,383
class = "name" > Кобальт
клас = "символ" > Co
клас = "номер" > 27
клас = "вага" > 58,933
class = "name" > Ітербій
клас = "символ" > Yb
клас = "номер" > 70
клас = "вага" > 173,054
class = "name" > Аргон
клас = "символ" > Ар
клас = "номер" > 18
клас = "вага" > 39,948
class = "name" > Азот
клас = "символ" > Н
клас = "номер" > 7
клас = "вага" > 14,007
class = "name" > Уран
клас = "символ" > U
клас = "номер" > 92
клас = "вага" > 238,029
class = "name" > Плутоній
class = "symbol" > Pu
class = "number" > 94
class = "weight" > (244)
При натисканні на будь-яку з кнопок, їй буде надано клас is-checked , а змінною selector - атрибут data-filter цієї кнопки. Від значення цієї змінної залежить фільтрація. Бажано визначити явно і клас блоків в itemSelector (у наведеному прикладі item). У підсумку все буде виглядати таким чином:
Сортування
Інша можливість плагіна - це сортування, мені здається все-таки воно затребуване менше, ніж фільтрація, якщо подумати для чого його можна використовувати? Ну хіба що для якогось інтернет-магазину.
Для ілюстрації роботи скрипта, як і раніше, ідеальними є хімічні елементи, так як у них багато параметрів, за якими можна сортувати. Використовуємо як демо-приклад той же html-код блоків, що і у разі фільтрації. Керуючі кнопки дещо зміняться - буде присутні два ряду кнопок - сортування за зростанням (asc) і за зменшенням (desc), крім того, замість атрибуту data-filter з'явиться атрибут data-sort-by, що використовується в сценарії.
Спочатку сценарієм визначається значення атрибуту data-sort-by натиснутої кнопки і надається параметру SortBy (у змінній sortName), який якраз і відповідає за те, за якою ознакою сортуватимуться елементи. Якщо батьківський елемент цієї кнопки має клас asc, то сортування здійснюється за зростанням, інакше - за спаданням.
Ізотоп зчитує дані з розмітки за допомогою getSortData. Цей параметр приймає об'єкт з параметрами, що використовуються для сортування, як їх значення може виступати як функція, так і рядок. Ми розглянемо найпростіший варіант, коли використовуватимуться рядки з класом , щоб отримати вмістелемента цього класу ( саме: .name,.symbol,.weight,.number ). Проблем із сортуванням за першими двома параметрами виникнути не повинно, а ось елементи класу .number і .weight містять числа, тому щоб сортувати їх правильно за зростанням/зменшенням потрібно перевести отримані скриптом значення в числову форму. На щастя, нічого самим робити не потрібно, можна просто додати в кінці додаткові ключові слова parseInt і parseFloat відповідно для перетворення рядка в ціле і дрібне число. Нижче наведено код сценарію.