Jquery easy UI 上中下三栏布局代码,JS代码库,德仔网

代码语言

代码分类

【JS】 Jquery easy UI 上中下三栏布局

作者:Barlow / 发布于2016/1/4/ 591


	源代码：

	<!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: width, height: panelHeight });
	 $('#centerPanel').panel('resize', { width: width, height: panelHeight });
	 $('#bottomPanel').panel('resize', { width: width, height: panelHeight });
	 $('#mainLayout').layout('resize', { width: 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: width, height: height });
	 $('.easyui-layout').layout('resize', { width: width, height: height });
	 $('.easyui-treegrid').treegrid('resize', { width: width, height: height });
	 $('.easyui-datagrid').datagrid('resize', { width: width, height: height });
	 }
	 }
	 </script>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

Barlow贡献的其它代码(6)