07-EasyUI_layout的引入

0. 截图与源码下载

    源码(MyEclipse2013拷贝): EasyUI_05.zip

    07-EasyUI_layout的引入_第1张图片


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>





你可能感兴趣的:(easyui,layout,引入)