示例

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <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',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>
</div>



如果将layout表示在body标签上，就会全屏都是一个布局

<body class="easyui-layout">
<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',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>

用JS创建一个布局

<script type="text/javascript">
    $(function () {
        $("body").layout();
        $("body").layout('add',{
            region:"center",
            title:"中间"
        });
        $("body").layout('add',{
            region:"north",
            title:"上面",
            height:100
        });
        $("body").layout('add',{
            region:"south",
            title:"下面",
            height:100
        });
        $("body").layout('add',{
            region:"west",
            title:"左边",
            width:100
        });
        $("body").layout('add',{
            region:"east",
            title:"右边",
            width:100
        });
    })
</script>

但用JS直接创建这种布局没什么用，一般都需要在添加的布局中使用href属性，添加其他页面作为本布局

<script type="text/javascript">
    $(function () {
        $("body").layout();
        $("body").layout('add',{
            region:"center",
            title:"中间",
            href:"<%=homePage%>/test/layout_003_center.jsp"
        });
        $("body").layout('add',{
            region:"north",
            title:"上面",
            height:100,
            href:"<%=homePage%>/test/layout_003_north.jsp"
        });
        $("body").layout('add',{
            region:"south",
            title:"下面",
            height:100,
            href:"<%=homePage%>/test/layout_003_south.jsp"
        });
        $("body").layout('add',{
            region:"west",
            title:"左边",
            width:100,
            href:"<%=homePage%>/test/layout_003_west.jsp"
        });
        $("body").layout('add',{
            region:"east",
            title:"右边",
            width:100,
            href:"<%=homePage%>/test/layout_003_east.jsp"
        });
    })
</script>

这种远程加载的页面，只能加载到body中的内容，这点要千万注意，而且一定要添加 

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

否则中文乱码

以上使用href属性改造后，效果如下




布局总共有5块面板，但并不全是必须的，只有center是必须的，其他几块都可以省略


layout布局支持嵌套


split:true,  //设置面板大小可调整

建议页面中的每个元素都使用layout，如datagrid等，这样可以很方便的实现页面自适应






 
												


											
布局 - layout的更多相关文章
	

    
						
  1. Duilib源码分析(五)UI布局—Layout与各子控件
		
    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
    
		
    2. 
						
  2. jquery easy ui 1.3.4 布局layout（4）
		
    4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...
    
		
    3. 
						
  3. [转]struct实例字段的内存布局(Layout)和大小(Size)
		
    在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...
    
		
    4. 
						
  4. Extjs布局——layout: 'card'
		
    先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...
    
		
    5. 
						
  5. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
		
    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
    
		
    6. 
						
  6. WPF笔记(2.7 文字布局)——Layout
		
    原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...
    
		
    7. 
						
  7. ExtJs常用布局--layout详解（含实例）
		
    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor  ...
    
		
    8. 
						
  8. sencha touch 入门系列  (九) sencha touch 布局layout
		
    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...
    
		
    9. 
						
  9. 前端框架 EasyUI （2）页面布局 Layout
		
    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
    
		
    10. 
						
  10. dojo布局(layout)
		
    使用BorderContainer和ContentPane实现布局 1.效果图如下: 2.HTML代码: <div id="appLayout" class="de ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. OC字符串NSString
			
    ========================== 面向对象编程进阶和字符串 ========================== Δ一.类的设计模式—单例 [单例]程序允许过程中,有且仅有一块内存 ...
    
			
    2. 
						
  2. lambda浅尝
			
    很久没写日志了,今天动动手记录下刚刚弄了一遍的lambda. 配置module下的build.gradle android { ... // 版本有要求 buildToolsVersion " ...
    
			
    3. 
						
  3. HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码
			
    横幅广告(Banner): 1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上:当用户单击这些横幅广告时,通常可以链接到相应的广告页面: 2.设计横幅广告时,要力求简单明了,能够体现出主要的中 ...
    
			
    4. 
						
  4. 回到过去美好的时光——源代码版本管理Always Use source code Control
			
    Don't Repeat Yourself Don't Repeat Yourself,这是程序员修炼之道中的经典名言.源代码版本管理对程序员来说是非常重要的工作.因为它让你能够回到过去,而不用做重复 ...
    
			
    5. 
						
  5. 分组函数 ----group by  使用总结
			
    总结:1,在where子句中不能用分组聚合函数.       2,如果没有group by 子句,select 不能同时出现字段与分组的聚合函数.       3,在有 group by 的子句的查询 ...
    
			
    6. 
						
  6. 查看ORACLE的实际执行计划
			
    ORACLE的执行计划分为预估执行计划和实际执行计划.其中,你用Toad.PL/SQL Developer.SQL Developer.EXPLAIN PLAN FOR或者SET ATUOTRACE  ...
    
			
    7. 
						
  7. jsp有哪些内置对象?作用分别是什么?分别有什么方法？
			
    JSP共有以下9个内置的对象: request 用户端请求,此请求会包含来自GET/POST请求的参数 response 网页传回用户端的回应 pageContext 网页的属性是在这里管理 sess ...
    
			
    8. 
						
  8. Java 文档注释
			
    Java只是三种注释方式.前两种分别是// 和/* */,第三种被称作说明注释,它以/** 开始,以 */结束. 说明注释允许你在程序中嵌入关于程序的信息.你可以使用javadoc工具软件来生成信息, ...
    
			
    9. 
						
  9. WCF绑定和行为在普通应用和SilverLight应用一些对比
			
    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 阅读目录 介绍 绑定 普通应用和SilverLight应用区别 本文版权归mephisto和博客园共有, ...
    
			
    10. 
						
  10. c# bass入门学习
			
    据说bass挺好用的,所以又搞了个音乐播放器 这是参考了别人的bass教学结合自己的理解写的bass操作类 public class BassHelper { private static BassH ...
    
			
    11.