效果图：
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery easy UI 上中下三栏布局</title>
<link href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="jquery-easyui-1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery-easyui-1.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<div class="easyui-layout" id="mainLayout" border="false">
<div id="topPanel" data-options="region:'north',split:true" title="顶部部分">
</div>
<div id="centerPanel" data-options="region:'center',split:true" title="中间部分">
</div>
<div id="bottomPanel" data-options="region:'south',split:true" title="底部部分">
</div>
</div>
<script type="text/javascript">
window.customResize = function () {
var width = $(window).width() - 10;
var height = $(window).height();
var panelHeight = parseInt(height / 3); //每个1/3高度
$('#topPanel').panel('resize', { width, height: panelHeight });
$('#centerPanel').panel('resize', { width, height: panelHeight });
$('#bottomPanel').panel('resize', { width, height: panelHeight });
$('#mainLayout').layout('resize', { width, height: height });
};
</script>
<script type="text/javascript">
//窗口缩放时，重绘布局控件尺寸
$(function () {
redraw();
});
$(window).resize(function () {
redraw();
});
function redraw() {
if (window.customResize) {
customResize(); //自定义缩放函数，页面若使用多个布局控件，需自定义缩放函数处理
} else {
var width = $(window).width();
var height = $(window).height();
//没有自定义缩放函数时，默认对panel，layout，treegrid，datagrid等控件进行调整
$('.easyui-panel').panel('resize', { width, height: height });
$('.easyui-layout').layout('resize', { width, height: height });
$('.easyui-treegrid').treegrid('resize', { width, height: height });
$('.easyui-datagrid').datagrid('resize', { width, height: height });
}
}
</script>
</body>
</html>
完整示例：
http://qingshanboke.com/Uploadfiles/file/20150206/6355881114276855463509463.rar
版权声明：本文为博主原创文章，未经博主允许不得转载。