我想分解成多個JQuery UI選項卡的HTML表單，並有一個「所有」選項卡，其中包含一個形式的所有位

Question

我想要一個大的HTML表單分解成幾個較小的子表單JQuery UI選項卡布局。但我想有一個特殊的「全部」選項卡，其中包含該選項卡上的所有子表單。因此，當用戶點擊全部選項卡時，他們可以查看和編輯通常分成幾個選項卡的所有表單域。

我怎麼能輕鬆地用JQuery做到這一點？我想避免有兩個實際字段的副本，因爲在子表單版本和特殊的「全部」表單版本之間複製/粘貼數據似乎很痛苦。

請注意：我正在使用ui.jquery.com選項卡布局。

Answer 1

好像你只需要在DIV中對你的字段進行分組，然後一次只能看到一個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

假設您已經有不同的標籤工作/顯示，當用戶單擊全部並全部顯示它們時，您可以遍歷所有元素（帶顯示和隱藏的表單字段的塊）。

Answer 3

這聽起來並不困難。將每個子表單封裝在它自己的容器div中。在ready（）方法的'all'頁面上將所有div元素相對放置，並將每個div設置爲可見。然後設置div的可見性，禁止選中，單擊您的選項卡按鈕/字段以隱藏它們。點擊「全部」只需調用您在ready（）方法中使用的相同函數，即可將div放在第一個實例中。

你絕對不需要兩個字段的副本（或者必須在它們之間進行任何複製）。

但是，有大量的javascript/jquery選項卡組件，我可能會從其中一個開始，首先看看其他人如何做，其次，如果可以調整它。

一些標籤插件：

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/