Формы с вкладками (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>


Другие модули

Редактирование одиночных полей формы в личном кабинете

Кнопка очистки формы

Цвет фона формы. Как изменить фон формы на сайте

Сообщение-уведомление на сайте вместо показа формы (NoForm). Отображение сообщения о недоступности формы

Работа с буфером обмена на сайте. Как скопировать текст в буфер обмена

Обновление содержимого страницы сайта (Refresh container). Перезагрузка части страницы

Любой вид формы на сайте - гибкая разметка формы

Выбор адреса и координат с подгрузкой из Google Maps API

Последние обновления

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства