07-EasyUI_layout的引入
0. 截图与源码下载
源码(MyEclipse2013拷贝): EasyUI_05.zip 
1. 将body渲染成layout
<body class="easyui-layout">
<div region='north' title='North Title' split=true style="height:100px;"></div>
<div region='south' title='South Title' split=true style="height:100px;"></div>
<div region='east' title='East' split=true style="width:100px;"></div>
<div region='west' title='West' split=true style="width:100px;"></div>
<div region='center' title='center title' style="padding:5px;background:#eee;"></div>
</body>
注意:
(1) 东南西北是可选, 中是必须的
(2) 推荐每个后台页面都使用layout,避免发生界面不能自适应的问题
2. 属性介绍
① title
标题
② region
区域 north, south, east, west, center.
③ border
True to show layout panel border
④ split
分隔线,用户是否能拖动(调整)
⑤ iconCls
An icon CSS class to show a icon on panel header.
⑥ href
载入代码片段,注意,只载入<body>标签体内的内容,其他的一律忽略
⑦ collapsible
Defines if to show collapsible button.
注:
href属性载入页面,会过滤掉除body外其他的元素,原因
1) layout 继承 panel 的href
2) panel 的 extrator 过滤掉了其他的元素
3) 如果需要引入<script>,则<script>必须写在<body>标签体内
3. 方法介绍
① panel
获得 指定方位的panel
var centerPanel = blayout.layout("panel", "center");
console.info( centerPanel );
② collapse
折叠
blayout.layout("collapse", "west");
③ expand
展开
blayout.layout("collapse", "west");
4. 完整网页代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>layout</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<!--
layout
步骤:
1. 将body渲染成layout
<body class="easyui-layout">
<div region='north' title='North Title' split=true style="height:100px;"></div>
<div region='south' title='South Title' split=true style="height:100px;"></div>
<div region='east' title='East' split=true style="width:100px;"></div>
<div region='west' title='West' split=true style="width:100px;"></div>
<div region='center' title='center title' style="padding:5px;background:#eee;"></div>
</body>
注意:
(1) 东南西北是可选, 中是必须的
(2) 推荐每个后台页面都使用layout,避免发生界面不能自适应的问题
2. 属性介绍
① title
标题
② region
区域 north, south, east, west, center.
③ border
True to show layout panel border
④ split
分隔线,用户是否能拖动(调整)
⑤ iconCls
An icon CSS class to show a icon on panel header.
⑥ href
载入代码片段,注意,只载入<body>标签体内的内容,其他的一律忽略
⑦ collapsible
Defines if to show collapsible button.
注:
href属性载入页面,会过滤掉除body外其他的元素,原因
1) layout 继承 panel 的href
2) panel 的 extrator 过滤掉了其他的元素
3) 如果需要引入<script>,则<script>必须写在<body>标签体内
3. 方法介绍
① panel
获得 指定方位的panel
var centerPanel = blayout.layout("panel", "center");
console.info( centerPanel );
② collapse
折叠
blayout.layout("collapse", "west");
③ expand
展开
blayout.layout("collapse", "west");
-->
<script type="text/javascript">
var blayout;
$(function() {
// 获得 layout
blayout = $("#blayout");
console.info( blayout );
// 获得 中间的panel
var centerPanel = blayout.layout("panel", "center");
console.info( centerPanel );
// 获得panel的所有属性
var centerPanelOptions = centerPanel.panel("options");
console.info( centerPanelOptions );
// 获得panel的 title
var centerPanelTitle = centerPanelOptions.title;
console.info( centerPanelTitle );
// 初始化时, westPanel折叠
blayout.layout("collapse", "west");
// 用按钮控制西部panel的折叠与展开
$("#collapseBtn").bind("click", function(){
blayout.layout("collapse", "west");
});
$("#expandBtn").bind("click", function(){
blayout.layout("expand", "west");
});
});
</script>
</head>
<body class="easyui-layout" id="blayout">
<div region='north' title='North Title' split=true style="height:100px;"></div>
<div region='south' title='South Title' split=true style="height:100px;"></div>
<div region='east' title='East' split=true style="width:100px;"></div>
<div region='west' title='West' split=true style="width:100px;"></div>
<!--
<div region='center' href="center.html" title='center title' style="padding:5px;background:#eee;"></div>
-->
<div region='center' title='center title' style="padding:5px;background:#eee;">
<input id="collapseBtn" type="button" value="collapse west panel"/>
<input id="expandBtn" type="button" value="expand west panel"/>
</div>
</body>
</html>