jquery - 如何构建具有多个嵌套布局的 easyui 布局？

Question

我在我的应用中使用了 easyui 嵌套布局。我引用了 easyui 演示中给出的以下代码。

<div class="easyui-layout" style="width:700px;height:350px;">
        <div data-options="region:'north'" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                <div data-options="region:'center',border:false"></div>
            </div>
        </div>
 </div>

演示链接是

http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=

我需要像这样使用多个内部布局。

<div class="easyui-layout" style="width:700px;height:350px;">
         <div data-options="region:'north'" style="height:50px"></div>
         <div data-options="region:'south',split:true" style="height:50px;"></div>
         <div data-options="region:'east',split:true" title="East" style="width:180px;"></div>
         <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
         <div data-options="region:'center',iconCls:'icon-ok'" title="Center">
             <div class="easyui-layout" data-options="fit:true" id="innerlayout1">
                 <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                 <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                 <div data-options="region:'center',border:false"></div>
             </div>
             <div class="easyui-layout" data-options="fit:true" id="innerlayout2" style="display:none;">
                          <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                          <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                          <div data-options="region:'center',border:false"></div>
             </div>
             <div class="easyui-layout" data-options="fit:true" id="innerlayout3" style="display:none;">
                          <div data-options="region:'north',split:true,border:false" style="height:50px"></div>
                          <div data-options="region:'west',split:true,border:false" style="width:100px"></div>
                          <div data-options="region:'center',border:false"></div>
             </div>
         </div>
 </div>

默认情况下第一个内部布局是可见的，对于这个东部地区必须处于展开状态。当另一个 innerlayout 可见时，其他 innerlayout 被隐藏并且 east 区域被折叠。我的问题是，当东部地区折叠时，中心和东部地区之间会出现空白。我想让中心区域变大，这样空间就不会来了。

抱歉我的英语不好。请帮我解决这个问题。

Answer 1

如果我明白你想做什么，你需要先把中心分成西、中、东，然后再把每一个分成北、西和中:

<div class="easyui-layout" data-options="fit:true";">
        <div data-options="region:'north',split:true" style="height:50px"></div>
        <div data-options="region:'south',split:true" style="height:50px;"></div>
        <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
        <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
        <div data-options="region:'center', split:true">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'east',split:true" style="width:250px">
                     <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center East" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
                <div data-options="region:'west',split:true" style="width:250px">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center West" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
                <div data-options="region:'center',split:true" >
                   <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:true" Title="Center Center" style="height:150px"></div>
                        <div data-options="region:'west',split:true"  style="width:125px;"></div>
                        <div data-options="region:'center',split:true"></div>
                    </div>
                </div>
            </div>
        </div>
     </div>

结果: