en / ru

Отображение дополнительных форм: слайдер

Длинные формы - это плохая практика, от которой в последнее время все стараются уходить.

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

  • анимация - это хорошее и дешевое развлечение для пользователей :)
  • скрытие необязательных полей
  • замена стандартного <select> на что-то более привлекательное

В итоге обсуждений с заказчиком родились 2 версии.

1. Слайдер-карусель

Посмотреть в действии

Внутри .panel-slider размещаются несколько .panel-slide блоков, которые выстраиваются в цепочку с помощью стилей. Пользователю видна только одна панель (по-умолчанию это панель с классом default).

Переход между панелями происходит по клику на элемент с классом slideTo, у которого есть атрибут data-slideto с классом той .panel-slide, к которой необходимо перейти.

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

В примере панель default располагается в конце кода слайдера, но, конечно же, порядок панелей может быть любой. Разница будет лишь в направлении сдвига форм. Так, если у вас будет 2 дополнительные формы, то можно реализовать появление одной справа, а другой - слева. Надо лишь разместить default панель в коде между ними.

2. Слайдер-колода

Посмотреть в действии

Внутри .panel-slider размещаются несколько .panel-slide блоков, но располагаются они один над другим. Основная панель (с классом default) выведена поверх остальных с помощью z-index.

Переход между панелями происходит по клику на элемент с классом slideTo, у которого есть атрибут data-slideto с классом той .panel-slide, к которой необходимо перейти.

Если происходит переход на второстепенную панель, то панель default сдвигается вправо за пределы видимости. Если происходит возврат на главную панель - default выезжает справа и перекрывает текущую панель. Переходы между второстепенными панелями происходят без анимации (просто довешивается класс active, который поднимает её над другими), т.к. таких переходов просто не предвидится. Нормальный процесс таков: заполняем основную форму - перешли на дополнительную - вернулись на основную.

Порядок расположения панелей в коде не имеет значения.