4

我希望在 JQuery UI 选项卡布局中将大型 HTML 表单分解为几个较小的子表单。但我想要一个特殊的“全部”选项卡,其中包含该选项卡上的所有子表单。因此,当用户单击“全部”选项卡时,他们可以查看和编辑通常在多个选项卡上划分的所有表单字段。

我怎么能用 JQuery 轻松做到这一点?我想避免拥有实际字段的两个副本,因为在子表单版本和特殊的“全部”表单版本之间复制/粘贴数据似乎很痛苦。

请注意:我使用的是 ui.jquery.com 选项卡布局。

4

3 回答 3

3

似乎您只需要将字段分组到 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>
于 2009-02-17T20:58:14.190 回答
1

假设您已经有不同的选项卡在工作/显示,您可以在用户单击全部并全部显示时遍历所有元素(具有您显示和隐藏的表单字段的块) 。

于 2009-02-17T20:49:05.380 回答
1

听起来没那么难。将每个子表单包装在它自己的容器 div 中。将所有 div 元素相对于彼此放置在 ready() 方法中的“所有”页面上,并将每个 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/

于 2009-02-17T20:49:21.620 回答