EasyUI Layout 布局

1、在整个页面上创建布局（Layout）

<!DOCTYPE html>
<html>
<head>
    <title>吹泡泡的魚-主页</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
    <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',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>
</body>
</html>

2、在div中创建布局（Layout）

<!DOCTYPE html>
<html>
<head>
    <title>吹泡泡的魚-主页</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <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',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>
</body>
</html>

3、创建嵌套布局

<!DOCTYPE html>
<html>
<head>
    <title>吹泡泡的魚-主页</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
    <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',title:'West',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>
</html>

data-options详解：

　　布局选项（Layout Options）

名称 类型 描述 默认值
fit boolean

当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。

当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。

 false

　　区域面板选项（Region Panel Options）

名称 类型 描述 默认值
title string 布局面板（layout panel）的标题文本。 null
region string 定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。  
border boolean 当设置为 true 时，就显示布局面板（layout panel）的边框。 true
split boolean 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。 false
iconCls string 在面板（panel）头部显示一个图标的 CSS class。 null
href string 从远程站点加载数据的 URL 。 null
collapsible boolean 定义是否显示可折叠按钮。 true
minWidth number 面板（panel）最小宽度。 10
minHeight number 面板（panel）最小高度。 10
maxWidth number 面板（panel）最大宽度。 10000
maxHeight number 面板（panel）最大高度。 10000
posted @ 2018-11-26 15:24  知识追求者  阅读(523)  评论(0)  编辑  收藏  举报