布局 - layout

时间：2022-09-16 09:17:44

示例

<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

如果将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>

布局 - layout

但用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属性改造后，效果如下

布局 - layout



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


layout布局支持嵌套


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

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






 
														
		
布局 - layout的更多相关文章
	

    

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


随机推荐
	

    

  1. 
SQLServer中Partition By 函数的使用
			
    今天群里看到一个问题,在这里概述下:查询出不同分类下的最新记录.一看这不是很简单的么,要分类那就用Group By;要最新记录就用Order By呗.然后在自己的表中试着做出来: 首先呢我把表中的数据 ...
    
			
    2. 
						
  2. 
1&period;NopCommerce下载与安装
			
    NoCommerce是基于微软ASP.NET MVC + EntityFramework 技术开发的一套开源电子商城系统,其架构与设计非常精妙被誉为.NET商城的经典之作. 作为一个.NET程序爱好者 ...
    
			
    3. 
						
  3. 
把EXCEL列号数字变成字母
			
    把Excel 列号数字变成字母 private static string ToName(int index) { if (index < 0) { throw new Exception(&q ...
    
			
    4. 
						
  4. 
CSS基础--常用样式
			
    一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-rep ...
    
			
    5. 
						
  5. 
Luogu3768简单的数学题
			
    题目描述 题解 我们在一通化简上面的式子之后得到了这么个东西. 前面的可以除法分块做,后面的∑T2∑dµ(T/d)是积性函数,可以线性筛. 然后这个数据范围好像不太支持线性筛,所以考虑杜教筛. 后面那 ...
    
			
    6. 
						
  6. 
《通过C&num;学Proto&period;Actor模型》之Mailbox
			
    邮箱是Actor模型的一个重要组成部分,负责接收发过来的消息,并保存起来,等待Actor处理.邮箱中维护着两种队列,一种是存系统消息,另一个是存用户消息,系统省是指Started,Stoping,St ...
    
			
    7. 
						
  7. 
A&period;01&period;03-模块的输入—模拟量输入
			
    模拟量输入在使用过程中也十分常见,它在很多场合都应用到,但其用法又各有不同,下面列举一些常见的类型进行说明. 第一种为采用模拟口读取离散量的状态,如某开关可能有高.低.悬空三种状态均需能准确判断,这种 ...
    
			
    8. 
						
  8. 
用C&num;学习数据结构之线性表
			
    什么是线性表 线性表是最简单.最基本.最常用的数据结构.线性表是线性结构的抽象(Abstract),线性结构的特点是结构中的数据元素之间存在一对一的线性关系.这种一对一的关系指的是数据元素之间的位置关 ...
    
			
    9. 
						
  9. 
2-STM32物联网开发WIFI&lpar;ESP8266&rpar;&plus;GPRS&lpar;Air202&rpar;系统方案升级篇&lpar;视频总揽&rpar;
			
    1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(方案总揽) https://v.youku.com/v_show/id_XNDE0Njk3Njg2OA==. ...
    
			
    10. 
						
  10. 
获取EasyUI的treegrid的checkbox所有已勾选的数据
			
    EasyUI为TreeGrid的已勾选节点,未勾选节点,只勾选部分子节点的父节点分别添加了三个不同的样式,如下:样式一:tree-checkbox2 有子节点被选中样式二:tree-checkbox1 ...
    
			
    11. 
			
相关文章