转载：EasyUI -- Layout（布局）

最新推荐文章于 2019-06-11 22:00:40 发布

一个人的幽默

最新推荐文章于 2019-06-11 22:00:40 发布

阅读量265

点赞数

分类专栏： easyui 文章标签： easyui

easyui 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

创建布局的几种方法

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>

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

ps：嵌套的使用方法

<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>