示例

<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. iOS UITableViewController出现crash
			
    Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'attempt to de ...
    
			
    2. 
						
  2. iOS tableviewcell 分割线 偏移和颜色
			
    改变颜色 [_hotProductsTableView setSeparatorColor : kSeparatorColor]; -(void)viewDidLayoutSubviews { [su ...
    
			
    3. 
						
  3. Android对应用程序签名
			
    1.首先签名是个什么东西. 应用程序签名就是为你的程序打上一种标记,来作为你自己的标识. 2.为什么要进行数字签名 这是Android系统的要求,每一个应用程序必要要经过数字签名才可能安装到系统中,能 ...
    
			
    4. 
						
  4. DNS劫持解决方法
			
    刚在家上网,发自己的浏览器竟然还会弹出页面广告(我浏览器装了屏蔽广告的浏览器应用,理论上就不会出现什么弹出来的广告). 于是自己仔细研究了下,发现在易迅的页面竟然嵌套了一个iframe,首先易迅肯定不 ...
    
			
    5. 
						
  5. ios app响应background，foreground 事件实现
			
    1 通过AppDelegate 实现 App进入后台事件方法 - (void)applicationDidEnterBackground:(UIApplication *)application AP ...
    
			
    6. 
						
  6. JavaScript Patterns 5.9 method() Method
			
    Advantage Avoid re-created instance method to this inside of the constructor. method() implementatio ...
    
			
    7. 
						
  7. php截取字符串函数
			
    public function sub_string($str, $len, $charset="utf-8") { if( !is_numeric($len) or $len & ...
    
			
    8. 
						
  8. mybatis 中#{}与${}的区别
			
    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...
    
			
    9. 
						
  9. MySQL 中隔离级别 RC 与 RR 的区别
			
    1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的多个操作,不可分割,要么都成功,要么都失败: All or Nothing. 一致性(Consistency): ...
    
			
    10. 
						
  10. 数据库 SQL Server 到 MySQL 迁移方法总结
			
    最近接手一起老项目数据库 SQL Server 到 MySQL 的迁移.因此迁移前进行了一些调查和总结.下面是一些 SQL Server 到 MySQL 的迁移方法. 1. 使用 SQLyog 迁移  ...
    
			
    11.