накалякано мной по вопросам от @бродяга (насуйте ему плюсов за вдохновение хд)
вот тут лежит штука, которая генерит рабочие фильтры по словарю поля на название фильтра -> https://vpomoike.mybb.ru/pages/seks_s_filtrami
код там более актуальный, потому что подсасывается налету, разберу некоторые нюансы на текущем варианте
отсюда уносить нежелательно, но если очень хочется, то можно унести в стили без тегов style. Из нюансов: если у итема будут прописаны стили с display с important - начнется легкая рулетка на тему "кто позже и у кого чспецифичность выше"
просто верстка вашей будущей фильтруемой красоты
Важно, чтобы
-был итем (любой, хоть див, хоть что) с id заданным тут
const idPrefix = "my_works"
то бишь в данном случае my_works, это чтобы он все соседние подобные блоки не пытался перелопатить левыми фильтрами хд
-в этом блоке на любой глубине был итем (аналогично любой) с классом заданным тут
const filtersContainerClassname = 'filters'
туда он будет присобачивать собсно фильтры
-итемсы лежали в итеме (снова любом) с классом заданным тут
const itemsContainerClassname = 'items';
- можно в целом сделать пустую строку и забить, это больше перестраховочка на самом деле
Штука, на основе которой творится вся магия.
*По умолчанию (если тип не указан) оно просто берет все значения из data-${code} и фигачит селект с этими вариантами + вариант "все", вырубающий фильтрацию.
*Если указан тип boolean - оно делает селект из пунктов все/да/нет. Как "нет" оно воспринимает отсутствие соответствующего data-${code} или значение data-${code}="false"
*Когда-нибудь я клянусь добавить туда range, more, less и search, но пока их нет. Предварительно - range это два инпута про числа, more и less - один инпут про числа (больше/меньше), search - про "подстрока присутствует в атрибуте"
на всякий случай продублирую блок где задаются селекторы хд
Пример сгенерированных фильтров:
как можно заметить, оно насовывает в .${filtersContainerClassname} блоков с id обертки конкретного фильтра и классом wrapper, в которых лежат подпись и собственно сам фильтр - украшайте выплюнутое на здоровье(с)
Отредактировано Emerael (19.11.23 00:39)
- Подпись автора
Пиарю стайлер без смс и регистрации. Долой много_вкладок_админки, да здравствует IDE, синтаксис и скриншоты одной командой вместо того чтобы ходить смотреть все руками!