效果图:
源代码:
<!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
版权声明:本文为博主原创文章,未经博主允许不得转载。