EasyUI -- Layout（布局）

最新推荐文章于 2023-05-16 14:57:58 发布

小旭vip

最新推荐文章于 2023-05-16 14:57:58 发布

阅读量5.7k

点赞数 1

文章标签： easyui 布局

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

版权

第一章介绍

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

第二章创建布局的几种方法

1.为<div/>标签增加名为'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>

2. 使用完整页面创建布局

<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（布局）的简单介绍，写此篇博客主要记录我的学习过程，也希望对阅读此博客的人有点帮助。

小旭vip

关注

1
点赞
踩
2

收藏

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

第一章介绍 EasyUI -- Layout（布局）将布局容器分成了5个区域，分别是：east（东）、west（西）、south（南）、north（北）和center（中）。center（中）区域是必须的，其他边缘区域都是可选的。每个边缘区域都可以通过拖拽的方式改变大小，也可以点击折叠按钮将面板折叠起来。EasyUI 的布局是很灵活的，可以根据用户的需求
复制链接

扫一扫