07-EasyUI_layout的引入

深藏阁楼爱情的钟 2022-09-18 07:57 36阅读 0赞

# 0. 截图与源码下载 #

源码(MyEclipse2013拷贝): [EasyUI\_05.zip][EasyUI_05.zip]

![SouthEast][]

# 1. 将body渲染成layout #

注意:  
(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">
    
    <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' 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>

[EasyUI_05.zip]: http://download.csdn.net/detail/wuqinfei_cs/6541639
[SouthEast]: /images/20220828/0c48db92d1004a18aee7066326ba87f5.png