Многоуровневая HTML форма с вкладками
Столкнулся со сложностью реализации подобной формы, прошу помочь советом.
Пояснения к рисунку:
- Это календарь событий в единой форме, где можно добавлять месяцы, даты и события.
- При нажатии на январь и 28 соот. кнопки становятся зелеными, высвечиваются события проснулся утром, поел в обед, лег спать.
- При клике на февраль и 7 - видим соот. события
Вопросы:
- Понимаю как реализовать frontend часть через метод .append(), но не могу понять по архитектуре.
- Где будет находится зеленая ветка января с несохраненным input event3 «Здесь я пишу что-то сейчас», когда я щелкну на февраль и 7. Или когда нажму на + у месяцев. Создавать многослойный друг над другом и управлять ими через z-index? Может есть решение поизящней?
- Как построить архитектуру serializeArray() при отправке формы? Я подписал name у каждого элемента, но не уверен что правильно. И мне точно нужен serializeArray() ?
- Может есть плагины? Проект на Wordpress
Ответы (1 шт):
Ну, скорее всего, с точки зрения архитектуры, это не верное решение, но я бы сделал так: для месяца и для дат поставить "чекеры", т.е., выбран ли какой-то месяц и дата.
Далее сделал бы запрос на сервер (Допустим, через ajax), который вернул бы мне список каких-то дел (Событий) в этот день (В виде JSON массива (Не забываем пропарсить)). Далее сделал бы ОДНУ модалку (Или что вы там используете для отображения событий за какую-то дату) и выводил бы туда весь этот список дел (Событий).
-
Где будет находится зеленая ветка января с несохраненным input event3 «Здесь я пишу что-то сейчас», когда я щелкну на февраль и 7. Или когда нажму на + у месяцев
Нигде. Это можно просто не сохранять, я думаю, что пользователь привыкнет к этому. хаха)
Или можно это всё же сделать в модалке (Как я писал выше) и настроить обработчик (Что-то типа jQuery.change или других). При закрытии делаем запрос на сервер с просьбой сохранить то, что сейчас должно быть закрыто
-
Как построить архитектуру serializeArray() при отправке формы? Я подписал name у каждого элемента, но не уверен что правильно. И мне точно нужен serializeArray()?
Просто скажу, что я в этом не уверен, что оно вам нужно. То самое и про name. Лучше пробуйте смотреть в сторону jQuery селекторов по Id.
-
Может есть плагины? Проект на Wordpress
Можете попробовать и так, но тут главное помнить, если вы хотите, что бы оно выглядело максимально классно, то вы просто задолбаетесь играться и разбираться в этом плагине, т.к. это точно будет сложные, а не просто два скрипта и три функции)