本文介绍了如何利用EasyUI的布局控件创建页面布局，包括将屏幕划分为北、南、东、西、中五个区域，以及在各个区域内添加内容。详细展示了在中间区域创建嵌套布局，左侧添加手风琴控件，底部显示系统时间，以及在不同区域展示PDF和MP3播放器的实现方法。
12. 利用布局（layout）控件实现页面布局。
在EasyUI中，布局控件（layout）将屏幕分成五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center），每个区域都是一个容器，用于包含其他控件。中间区域面板（region: center）是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局可以嵌套，嵌套在里层的布局也分为5个区域，因此利用布局可建立复杂的页面排版。当布局的选项fit设置为 true 时，该布局的尺寸将与它的父容器相适应。因此，当在<body>标签上创建布局时，它将自动最大化到整个页面的全部尺寸。
本例程序运行界面如图2-9所示，具体布局过程与方法如下。
①在<body>标签中创建一个布局，在该布局中创建4个区域面板（其中东区缺省）。
<body id='main' class=“easyui-layout" data-options="fit:true" style="margin: 1px 1px 1px 1px;">
<div id='top' class='EasyUI-panel' data-options="region:'north'" style="overflow:hidden;
background-color: #E0ECFF; height:30px; padding: 1px 1px 1px 10px;"></div>
<div id='bottom' class='EasyUI-panel' data-options="region:'south'" style="height:60px;
overflow:auto;"></div>
<div id='left' class='EasyUI-panel' data-options="region:'west', split:true" style="overflow:auto;
最低0.47元/天 解锁文章
扫一扫
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
