Question

我有一个表单，在5个类别中超过100个字段，其中只需要3个字段，其余字段自动填充或设置为默认值。之前我使用dijit.TitlePane来分割各个部分并隐藏其余的部分。

我现在决定切换到标签式模型，因为我希望比垂直方式更水平地分发我的UI。现在，当我尝试使用dijit tabcontainer进行相同操作时，表单会破坏选项卡功能，并在第一个选项卡中显示所有元素。

这是我的代码：

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" region="center" >
    <form id="${cid}form" dojoType="dijit.form.Form" onSubmit="return false">
    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section1" selected="true">
        <table>
        <tr>
            [...]
        </tr>

        <tr id="...">
            [...]
        </tr>

        <tr id="...">
            [...]
        </tr>

        <tr>
            [...]
        </tr>

        <tr>
            [...]
        </tr>

        </table>
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section2">
        <table>
        <tr>
            [...]
        </tr>

        <tr>
            [...]
        </tr>

        </table>
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section3">
        [More tab content]
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Calendaring">
        [More tab content]
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section3">
        [More tab content]
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section4">
        [More tab content]
    </div>
    </form>
</div>

现在，如果我删除表单标签，则标签显示正常。有人可以帮我解决这个问题吗？

Answer 1

您是否尝试过以下方法？

<form id="${cid}form" dojoType="dijit.form.Form" onSubmit="return false">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" region="center" >
      <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section1" selected="true">
         ...
      </div>
      ...
   </div>
</form>

我猜测解析器无法构建TabContainer，因为它希望看到一堆ContentPanes但却找到了一个Form。一旦移到TabContainer之外，表单应该起到相同的作用。

Answer 2

上面的表单确实有效，但由于它又在bordercontainer中，因此UI仍然不合适。然后修复将表单放在contentpane中，并放在bordercontainer中。

使用dojo将表单拆分为选项卡式页面

2 个答案: