EasyUI - Layout 布局控件

最新推荐文章于 2025-08-19 08:41:01 发布

weixin_30409849

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/KTblog/p/4876065.html

本文展示了一个使用EasyUI框架进行页面布局的例子。通过定义不同区域（如north、south、east、west和center），并设置各自的特点（如高度、宽度、图标等），实现了灵活的响应式布局效果。

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

效果：

Html代码：

<div id="cc" class="easyui-layout" style="width: 600px; height: 400px;">
    <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>
</div>