Формы с вкладками (tabs) на сайте и сворачиваемыми панелями (accordeon)
В примере задействованы сворачиваемые панели и вкладки (табы). В них вставлены сниппеты компонентов таблица и форма.
Минусы подобного решения:
- данные компонентов грузятся сразу при загрузке страницы (если их будет очень много, то это создает лишнюю загрузку). Альтернативное решение - загрузка через кнопки as-form-link и модальные окна as-form-modal, когда данные грузятся по запросу.
- пользователи могут забывать сохранять формы и переходить на другие формы. Альтернативные решения - формы в модальном окне и сохранение полей по одиночке.
Пример разметки:
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Tab 1</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tab 2</a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Form 1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="as-form" data-code="watch_bg" data-itemID="1"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Form 2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<div class="as-form" data-code="watch_reset" data-itemID="1"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Form 3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<div class="as-form" data-code="watch_savefield" data-itemID="1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="as-table" data-code="watch_editing" data-itemID="0"></div>
</div>
</div>
Другие модули
Редактирование одиночных полей формы в личном кабинете
Цвет фона формы. Как изменить фон формы на сайте
Работа с буфером обмена на сайте. Как скопировать текст в буфер обмена
Обновление содержимого страницы сайта (Refresh container). Перезагрузка части страницы
Последние обновления
Форма 19.12.2022
Таблица 06.12.2022
Форма 01.12.2022
Форма 21.11.2022
Форма 17.11.2022
Форма 10.11.2022
Таблица 16.09.2022
Разное 14.09.2022
Таблица 09.09.2022
Форма 31.07.2022
Страницы 31.07.2022
Страницы 08.05.2022
Интеграции 04.04.2022
Интеграции 01.04.2022
Таблица 24.03.2022
Форма 24.03.2022
Разное 22.03.2022
Интеграции 07.03.2022
Разное 24.02.2022
SQL-инструмент для создания личных кабинетов на сайте

Платформа Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки
Это быстрое внесение изменений
по ходу эксплуатации программы
Это современный интерфейс
полная адаптация под мобильные устройства