07-EasyUI_layout的引入

最新推荐文章于 2023-05-16 14:57:58 发布

forwardNow

最新推荐文章于 2023-05-16 14:57:58 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： EasyUI layout 引入

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/15658509

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

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>