java_easyui体系之layout

最新推荐文章于 2019-03-16 10:58:48 发布

huaying.chen

最新推荐文章于 2019-03-16 10:58:48 发布

阅读量2.2k

点赞数

分类专栏： Oscar_front 文章标签： layout easyui 布局 java js

本文链接：https://blog.csdn.net/crave_shy/article/details/17793361

版权

Oscar_front 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

java_easyui体系之layout

一：简介

用于实现页面整体布局、将页面分成五个模块——东、西、南、北、中。其中中是与其他四块有密切关系。

二：页面源码

有layout的基本使用、其中中部内嵌一个html页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'original.jsp' starting page</title>
    
    <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
    	var layout;
    	$(function(){
    		layout = $('#blayout').layout();
    		//南部面板折叠
    		layout.layout('collapse', 'south');
    	});
    	
    	//获取中间面板属性
    	function getCenterPanel(){
    		var panel =layout.layout('panel', 'center');//已经获取中央面板、可使用panel具有的属性、方法
    		console.info('center panel title : ' + panel.panel('options').title);
    	}
    	
    	//展开南部面板
    	function expandCollapsePanel(){
    		layout.layout('expand','south');
    	}
    	
    	//删除东部面板
    	function removeEastPanel(){
    		layout.layout('remove', 'east');
    	}
    	
    	//添加东部面板、当原来的面板存在时、点击添加不会将原有面板替换掉。注意有些地方的引号别漏掉
    	function addEastPanel(){
    		layout.layout('add',{
    			region:'east',
    			width:200,
    			title:'East Title',
    			split:true,
    			tools: [{  
    		        iconCls:'icon-add',  
    		        handler:function(){alert('add');}  
    		    },{  
    		        iconCls:'icon-remove',  
    		        handler:function(){alert('remove');}  
    		    }]  
    		});
    	}
    	
    </script>
  </head>
  
	<body id="blayout">
	    <div data-options="region:'north',title:'North Title',split:false" style="height:100px;">
	    	<input type="button" value="expand" οnclick="expandCollapsePanel()">    
	    	<input type="button" value="remove" οnclick="removeEastPanel()">    
	    	<input type="button" value="add" οnclick="addEastPanel()">    
	    </div>
	    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
	    	<input type="button" value="click" οnclick="getCenterPanel()">
	    </div>
	    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
	    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
	    <div data-options="region:'center',iconCls:'icon-save',title:'center title',href:'center.html'" style="padding:5px;background:#eee;"></div>
	    
	    
	</body>
</html>

center.html页面：

1、center 中使用href载入的另一个页面的内容、只会载入"body"之间的内容、其他的都不会载入、更不会执行你在这个页面写入的javascript代码。<br/>
 切记所以想要在layout中使用href时、最好的方法就是将被载入的页面中所有内容删掉、只关心body之间的内容.
<br/><br/>
2、他会将body中内容按照html格式解析、然后返回结果：   下面这段注释内容就不会显示 <!-- 注释内容 -->
<br/><br/>
3、注意引入的顺序：data-options="region:'center',iconCls:'icon-save',title:'center title',href:'center.html'"
这里href要放在最后、放在前面都不能正常显示。

简单说明：

1、在上面center.html页面中可以看出、基本什么标签都没有用、内嵌页面只会读取body中间的内容、其他的一概不问、

2、如果想要加入js效果、则可以将js写入到body中来实现。