EasyUI -- Layout（布局）

最新推荐文章于 2022-05-09 22:29:51 发布

狼魂豹速

最新推荐文章于 2022-05-09 22:29:51 发布

阅读量2k

点赞数

原文链接：https://blog.csdn.net/u010709596/article/details/51866147

版权

第一章介绍
EasyUI – Layout（布局）将布局容器分成了5个区域，分别是：east（东）、west（西）、south（南）、north（北）和center（中）。center（中）区域是必须的，其他边缘区域都是可选的。每个边缘区域都可以通过拖拽的方式改变大小，也可以点击折叠按钮将面板折叠起来。EasyUI 的布局是很灵活的，可以根据用户的需求，使用不同的嵌套，构建复杂的布局。
第二章创建布局的几种方法
1.为

标签增加名为’easyui-layout’的类ID。 \\\

<div id="cc" class="easyui-layout" fit="true" style="overflow:hidden;">   
    <div data-options="region:'north',title:'North'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'south',title:'South'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'east',title:'East'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'west',title:'West'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'center',title:'center'" style="padding:5px;overflow:hidden;"></div>
	</div>   
    </div>

使用完整页面创建布局

<pre name="code" class="java"><pre name="code" class="java"><pre name="code" class="java" style="font-size: 18px;"><body class="easyui-layout">   	
    <div data-options="region:'north',title:'North'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'south',title:'South'" style="height:100px;overflow:hidden;"></div>   
    <div data-options="region:'east',title:'East'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'west',title:'West'" style="width:100px;overflow:hidden;"></div>   
    <div data-options="region:'center',title:'center'" style="padding:5px;overflow:hidden;"></div>
</body>

两种布局方法实现的效果都是一样，下面这张图片就是效果图

第三章嵌套的使用方法

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

效果图

第四章小结
以上EasyUI – Layout（布局）的简单介绍，写此篇博客主要记录我的学习过程，也希望对阅读此博客的人有点帮助。

原文路径

狼魂豹速

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
EasyUI -- Layout（布局）

第一章  介绍                    EasyUI -- Layout（布局）将布局容器分成了5个区域，分别是：east（东）、west（西）、south（南）、north（北）和center（中）。center（中）区域是必须的，其他边缘区域都是可选的...
复制链接

扫一扫