1 ，布局 ： 全部代码
- 代码 ：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easy_ui/jquery.min.js"></script>
<script type="text/javascript" src="easy_ui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easy_ui/locale/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easy_ui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easy_ui/themes/icon.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/aa.ico" />
</head>
<body id="main" class="easyui-layout">
<div data-options="region:'north',title:'北'" style="height: 100px"></div>
<div data-options="region:'south',title:'南'" style="height: 100px"></div>
<div data-options="region:'west',title:'西'" style="width: 100px"></div>
<div data-options="region:'east',title:'东'" style="width: 100px"></div>
<div data-options="region:'center',title:'中'"></div>
</body>
</html>
- 效果 ：
2 ，允许用户拖动，改变大小 ：
- 精华 ： split:true
- 代码 ：
<body id="main" class="easyui-layout">
<div data-options="region:'north',title:'北',split:true" style="height: 100px"></div>
<div data-options="region:'south',title:'南'" style="height: 100px"></div>
<div data-options="region:'west',title:'西'" style="width: 100px"></div>
<div data-options="region:'east',title:'东'" style="width: 100px"></div>
<div data-options="region:'center',title:'中'"></div>
</body>
- 可以拖动了 ：
3 ，图标 ： iconCls:‘icon-save’
- 代码 ：
- 效果 ：
4 ，不可以折叠 ：
- 代码 ：
collapsible:false
- 效果 ： 不能折叠了
5 ，常用的布局 ： 上左右
- 代码 ：
<body id="main" class="easyui-layout">
<div data-options=" region:'north',
title:'北',
collapsible:false
" style="height: 100px"></div>
<div data-options="region:'west',title:'西',collapsible:false" style="width: 300px"></div>
<div data-options="region:'center',title:'中',collapsible:false"></div>
</body>
- 效果 ：
