Geek Answers Handbook

I want to split an HTML form into several tabs of the jQuery interface and have one tab "ALL", which has all the bits of the form in one

I want the large HTML form to break into several small subforms in the jQuery UI tab layout. But I want to have a special tab "Everything", on which there are all subforms on this tab. Therefore, when the user clicks on the tab "All", they can see and edit all fields of the form, which are usually divided into several tabs.

How can I do this using jQuery? I wanted to avoid two copies of real fields, because it seems sick to copy / paste data between the version of the subform and the special version of "Everything."

Please note: I am using the tab tab of ui.jquery.com tab.

+4
source share
3 answers

It looks like you just need to group your fields into a DIV, and then only display one DIV at a time, until the viewer selects "All." This is a very quick layout, but I must clearly illustrate my point.

<!-- 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>
+3
source

Assuming that you are already working / showing different tabs, you can simply scroll through all the elements (blocks with the fields that you show and hide as requested) when the user clicks all and shows them all.

+1
source

Doesn't sound so complicated. Wrap each subform in its own div container. Place all the div elements relative to each other on the "all" page in the ready () method and set each div to be visible. Then set the visibility of the sections, select the selected ones by clicking on the buttons / fields of the tab to hide them. Pressing "all" simply calls the same function that you use in your ready () method to lay out divs in the first instance.

You definitely don't need two copies of the fields (or they need to do some kind of copying between them). A.

However, there are many components of the javascript / jquery tab, I probably start with one of them and see, firstly, how someone else does it, and secondly, if you can adapt it.

Some tab plugins:

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

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

Setting the visibility of a div:

http://drupal.org/node/287259

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

+1
source

More articles:


All Articles