示例

<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. 苹果企业账号打包发布APP流程详解
			
    原文链接:http://www.cnblogs.com/mddblog/p/4718228.html 一.通过企业账号申请证书 1 Certificate Signing Request (CSR)文 ...
    
			
    2. 
						
  2. C++语言-06-文件操作
			
    C语言文件操作 C++语言是C语言的超集,是在C语言的基础上增加了面向对象的特性而创造出来的,最初被命名为带类的C.所以C++语言中包含了C语言的思想,如:C++语言中文件操作的原理与步骤与C语言基本 ...
    
			
    3. 
						
  3. 关于rails里集成测试assert_template的写法
			
    assert_template后面只能跟随模板文件名,不能跟随命名路径.比如routes.rb: get 'login' => 'sessions#new' 在集成测试用例里,只能写成asser ...
    
			
    4. 
						
  4. yii2集成富文本编辑器redactor
			
    作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...
    
			
    5. 
						
  5. Java Gradle入门指南之简介、安装与任务管理
			
        这是一篇Java Gradle入门级的随笔,主要介绍Gradle的安装与基本语法,这些内容是理解和创建build.gradle的基础,关于Gradle各种插件的使用将会在其他随笔中介绍.    ...
    
			
    6. 
						
  6. 《CLR via C#》读书笔记--基元类型、引用类型和值类型
			
    编程语言的基元类型 编译器直接支持的数据类型称为基元类型.基元类型直接映射到Framework类库中存在的类型.例如:C#中的int直接映射到System.Int32类型.下表给出了C#基元类型与对应 ...
    
			
    7. 
						
  7. 说完Pivot 今天说下Unpivot 的处理方式
			
    上次说到,既然有Pivot 的行转列,那么肯定也有Unpivot 的列转行 .其实unpivot 处理的情况也是差不多,也是分3步走. 首先也是先演示一下unpivot 的用法 ),Mon TIME, ...
    
			
    8. 
						
  8. 问题解决——开启Guest后仍无法共享打印机
			
    ==================================声明================================== 本文版权归作者所有 未经作者授权 请勿转载 保留法律追究的 ...
    
			
    9. 
						
  9. Sybase PowerDesign 导入数据库结构formSqlserver
			
    采用Sybase PD 创建数据库设计是常见的方法,如果遇到链接数据源时,无法直接链接系统数据源,而且在Sybase PD中无法直接创建odbc数据源时, 可以到控制面板中创建数据源,一步步的网络上有 ...
    
			
    10. 
						
  10. MYSQL：使用\G参数改变输出结果集的显示方式
			
    在mysql命令行工具中执行查询时,当表的列很多的时候显示很乱. 上面的显示你肯定看不清楚吧.以上方式是默认以列(表格)形式显示的.那怎么以行(表单)的方式显示呢,请看下面 OK,搞定. 参考文档:h ...
    
			
    11.