easyui如何嵌套

最新推荐文章于 2023-05-09 15:24:46 发布

原创最新推荐文章于 2023-05-09 15:24:46 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

easyui 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何在EasyUI框架下进行页面布局的嵌套操作，通过删除不必要组件，如南部和东部区域，专注于中部center区域的嵌套方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面中先copy文档中的完全布局

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

页面变为如此

去掉不必要的部分南部和东部。

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>     
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>   
</body>

如果要嵌套的话，假设在中部center嵌套

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;">
    	<div class="easyui-layout" fit="true">
	        <div region="west" split="true" style="width:100px;">
	        </div>
	        <div region="center" split="true">
	        </div>
	        <div region="east" split="true" style="width:300px;">
        	</div>
    	</div>
    </div>