Layout(布局)

                布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout:通过标签创建布局</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
  <body>
  	<%
		/*
			为div标签增加名为'easyui-layout'的类ID
			region:布局面板位置;  title:布局面板标题;  split:true时可以通过分割栏改变面板大小
			iconCls:包含图标的CSS类ID(icon-**)
			可以在标签中间层输入html或文本
		*/  	
  	 %>
	<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
		<div data-options="region:'north',title:'上',split:false" style="height:100px;">Up</div>   
	    <div data-options="region:'south',title:'下',split:true" style="height:100px;">Down</div>   
	    <div data-options="region:'east',iconCls:'icon-no',title:'东',split:true" style="width:100px;"></div>   
	    <div data-options="region:'west',title:'西',split:true" style="width:100px;"></div>   
	    <div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"><h1>墨渐生微</h1></div>   
	</div>
  </body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout:使用完整页面创建布局</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  
	<body class="easyui-layout">
		 <%
			/*
				为div标签增加名为'easyui-layout'的类ID
				region:布局面板位置;  title:布局面板标题;  split:true时可以通过分割栏改变面板大小
				iconCls:包含图标的CSS类ID(icon-**)
			*/  	
	  	 %>	  
	    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
	    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
	    <div data-options="region:'east',iconCls:'icon-reload',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',title:'center title'" style="padding:5px;background:#eee;"></div>   
	</body> 
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>Layout:嵌套布局</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	</head>
  
	<body class="easyui-layout">
		<%
			/*
				fit:布局组件将自适应父容器
				collapsed:是否显示折叠按钮
			*/  	
	  	 %>   
	    <div data-options="region:'north'" style="height:100px"></div>   
	    <div data-options="region:'center'">   
	        <div class="easyui-layout" data-options="fit:true">   
	            <div data-options="region:'west',collapsed:true" style="width:180px"></div>   
	            <div data-options="region:'center'"></div>   
	        </div>   
	    </div>   
	</body> 
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>JS代码创建布局</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	  	
	  	<script type="text/javascript">
	  		$(document).ready(function(){
		  		$('#cc').layout('add',{    
				    region: 'west',    
				    width: 180,    
				    title: '西',    
				    split: true,    
				    tools: [{    
					        iconCls:'icon-add',    
					        handler:function(){alert('add');}    
					    },{    
					        iconCls:'icon-remove',    
					        handler:function(){alert('remove');}    
					    }]
				});
	  		});  		
	  	</script>
	</head>
  
	<body>
		<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> 
			<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 
		</div>
	</body> 
</html>

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页