示例

<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. GitHub Top 100 的项目(iOS)
			
    主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. Android 版本的在此: https://gith ...
    
			
    2. 
						
  2. 详解 Spotlight on Unix 监控Linux服务器
			
    1.安装 Spotlight on Unix 下载地址:http://yunpan.cn/QNWyEEvNS4xc9  访问密码 1c7d 傻瓜安装 2.配置spotlight登陆用户,注意spotl ...
    
			
    3. 
						
  3. C# 得到sqlserver 数据库存储过程,触发器,视图,函数 的定义
			
    经常从 生产环境 到测试环境, 需要重新弄一整套的数据库环境, 除了表结构以及表结构数据,可以用动软代码生成器 生成之外, 像 存储过程,触发器,等,好像没有批量操作的,意义哥哥农比较麻烦, 所以最近 ...
    
			
    4. 
						
  4. SQL Server(三)——增、删、改、查
			
    一.数据库操作 create database 数据库名称 ——创建drop database 数据库名称 ——删除use 数据库名称 ——使用go 两条SQL语句之间分隔 二.表的操作 create ...
    
			
    5. 
						
  5. php5.3新特性 之 mysql native driver(mysqlnd)
			
    概述 本文主要写给sa看的.码农就不用看了. mysql native driver(mysqlnd) 自从php5.3.0开始成为官方源代码的一部分, 用来取代传统的mysql client lib ...
    
			
    6. 
						
  6. Nginx 多站点配置
			
    最近学习和练习的时候,为Laravel应用程序添加了好几个站点,有些程序删除之后站点却还留着,这让强迫症感到非常难受,上次解决了这个问题之后并没有记录一下,于是导致今天又花了很多时间折腾,所以特地来写 ...
    
			
    7. 
						
  7. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]
			
    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...
    
			
    8. 
						
  8. SQL SERVER 并发【2015.12.16】
			
    并发控制模型   1.悲观并发控制: A.默认冲突存在,当前进程通过获取当前数据的锁阻止其他进程的访问. B.读与写之间是相互阻塞. 2.乐观并发控制: A.使用行版本控制保持数据被操作前的状态. B ...
    
			
    9. 
						
  9. mysql备份还原
			
    备份java代码如下: /** * 备份单个数据库 * @param dbName 数据库名称 * @return 备份成功或者失败 */ @Override public boolean backu ...
    
			
    10. 
						
  10. lsll 加载段限长指令
			
    static inline unsigned long get_limit(unsigned long segment) {  unsigned long __limit;  __asm__(&quo ...
    
			
    11.