java_easyui体系之layout

一：简介

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

二：页面源码

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

  
    
    
    
    
  
    
  
    
  
    <script type="text/java script" src="js/jquery.min.js">
    <script type="text/java script" src="js/jquery.easyui.min.js">
    <script type="text/java script">
    	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');}  
    		    }]  
    		});
    	}
    	
    
  
  
	
	    
  

	    	
       
	    	
       
	    	
       
	    
  
	    
  

	    	
   
	    
  
	    
  

	    
  

	    
  

	    
	    
	

center.html页面：

1、center 中使用href载入的另一个页面的内容、只会载入"body"之间的内容、其他的都不会载入、更不会执行你在这个页面写入的java script代码。

 切记所以想要在layout中使用href时、最好的方法就是将被载入的页面中所有内容删掉、只关心body之间的内容.



2、他会将body中内容按照html格式解析、然后返回结果：   下面这段注释内容就不会显示 
  



3、注意引入的顺序：data-options="region:'center',iconCls:'icon-save',title:'center title',href:'center.html'"
这里href要放在最后、放在前面都不能正常显示。

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

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

三：效果图

java script写在内部

7、 注意href的载入顺序对结果的影响、使用href之后就会覆盖原有的panel中的内容。

更多内容 ： java_easyui体系之目录――00