Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК)
Техническая поддержка
Корзина 0
Адаптивные dle шаблоны   Советы и новости   Универсальная форма для фильтра от Lazydev

Универсальная форма для фильтра от Lazydev

Предлагаю вашему вниманию универсальную адаптивную форму для модуля фильтра по дополнительным полям DLE Filter от LazyDev. Модуль вы можете приобрести тут https://lazydev.pro/product/7-dle-filter.html. Как настраивать фильтр, официальная документация https://readme.lazydev.pro/dle-filter.html.

Зачем это нужно?


Цель была создать универсальную форму, которая автоматически адаптируется к любой ширине и элементы которой быстро собираются путем "копировать-вставить". Вы можете вставить форму в любое место и она автоматически адаптируется.


В форме доступны следующие элементы: текстовое поле, чекбокс (можно заменить на radio), селект, мультиселект. Контент в ячейках может быть в одну колонку или две. Любую ячейку можно сделать в всю ширину принудительно.

Внешний вид


Естественно, внешний вид по умолчанию оставляет желать лучшего. Суть тут в том, чтобы быстро собрать структуру, а не дизайн. Для дизайна уже потребуется править css, а также включать плагины стилизации в админке модуля, это Nice Select, Chosen, Ion Range Slider.

Итак, код формы


Как пользоваться формой? Пример использования


  • Вставляю форму в нужное место.
  • Из элементов путем копирования удаления собираем нужную форму.

  • Теперь в готовом css вносим изменения по цвету, размеру, и получаем такую форму.

  • Дальше мы можем включить в модуле плагины стилизации списков, сделать слайдер диапазона, например, цены. Я этого уже делать не буду, для примера достаточно.
  • А теперь просто поставим эту форму в другое место и она автоматически адаптируется.


Код этой формы
css.css [2,41 Kb] (cкачиваний: 3)
main-filter.tpl [2,41 Kb] (cкачиваний: 3)


Давайте соберем еще одну форму, покрасивее, что-то похожее на https://auto.ru/krasnodar/cars/skoda/all/. И вот результат:


Код этой формы
css.css [3,22 Kb] (cкачиваний: 6)
main-filter.tpl [4,5 Kb] (cкачиваний: 4)
Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Коза - козел, корова - ... ?
Отзывов (1)
CelSoft
CelSoft Гости 25 марта 2021 16:26
Отличная форма, на своёй доске объявлений поставил.