Я хочу разбить HTML-форму на несколько вкладок пользовательского интерфейса JQuery и иметь одну вкладку «ВСЕ», в которой все биты формы находятся в одной

Question

Я хочу разбить большую HTML-форму на несколько меньших подформ в макете вкладок пользовательского интерфейса JQuery. Но я хочу иметь одну специальную вкладку «Все», в которой есть все подформы на этой вкладке. Поэтому, когда пользователь нажимает на вкладку «Все», он может видеть и редактировать все поля формы, которые обычно разделены на несколько вкладок.

Как я мог легко сделать это с JQuery? Я хотел избежать двух копий фактических полей, потому что кажется, что копировать / вставлять данные между версией формы и специальной версией формы «Все» кажется трудной.

Обратите внимание: я использую макет вкладки ui.jquery.com.

Answer 1

Похоже, вам просто нужно сгруппировать поля в DIVs, а затем одновременно видеть только один DIV, если только зритель не выбрал «Все». Это очень быстрый макет, но он должен ясно проиллюстрировать мою точку зрения.

<!-- Clicking a groupButton hides all groups, save for the href'd group -->
<a href="#group1" class="groupButton">Group 1</a>
<a href="#group2" class="groupButton">Group 2</a>

<!-- If the href'd group is '0', show all groups -->
<a href="#group0" class="groupButton">View All</a>

<div id="group1" class="group">
  <!-- Group 1 Form Elements -->
</div>
<div id="group2" class="group">
  <!-- Group 2 Form Elements -->
</div>

Answer 2

Звучит не так сложно. Оберните каждую вложенную форму в отдельный контейнер div. Поместите все элементы div относительно друг друга на странице «all» в методе ready () и установите каждый элемент div как видимый. Затем установите видимость элементов div, запретите выделение, нажмите кнопки / поля на вкладке, чтобы скрыть их. Нажатие «all» просто вызывает ту же функцию, которую вы используете в вашем методе ready (), чтобы выложить div в первом случае.

Вам определенно не нужны две копии полей (или вы должны копировать их между собой).

Тем не менее, существует множество компонентов javascript / jquery tab, я, вероятно, начну с одного из них и посмотрю, во-первых, как это делает кто-то другой, и, во-вторых, можете ли вы его адаптировать.

Некоторые плагины для вкладок:

http://stilbuero.de/jquery/tabs/

http://docs.jquery.com/UI/Tabs

Настройка видимости div:

http://drupal.org/node/287259

http://waxtadpole.wordpress.com/2008/11/26/jquery-toggle-visibility-of-a-div/

Answer 3

Предполагая, что у вас уже работают / отображаются различные вкладки, вы можете просто перебрать все элементы (блоки с полями формы, которые вы отображаете и скрываете по запросу), когда пользователь нажимает все и показывает их все .