布局 - layout
示例
<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的更多相关文章
- Duilib源码分析(五)UI布局—Layout与各子控件
接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
- jquery easy ui 1.3.4 布局layout(4)
4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...
- [转]struct实例字段的内存布局(Layout)和大小(Size)
在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...
- Extjs布局——layout: 'card'
先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- WPF笔记(2.7 文字布局)——Layout
原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock 最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- sencha touch 入门系列 (九) sencha touch 布局layout
布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...
- 前端框架 EasyUI (2)页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- dojo布局(layout)
使用BorderContainer和ContentPane实现布局 1.效果图如下: 2.HTML代码: <div id="appLayout" class="de ...
随机推荐
- java field, property,variable及getField和getDeclaredField的区别
java 里面的field ,property, attribute,variable的区别 field: 就是定义的用于保存数据的字段 property: property是用于描述类中的特征,所以 ...
- 【Android】魅族Flyme OS 3摄像头无法预览的问题
错误代码: 12-12 14:28:34.692: E/AndroidRuntime(1524): java.lang.RuntimeException: startPreview failed 12 ...
- iOS集成ijkplayer视频直播框架,遇到的bug和坑...
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 32.0px "Helvetica Neue"; color: #555555 } p. ...
- C语言的结构体和C++结构体的区别
关于C++中声明结构体中需要使用构造器创建实例对象的语法: <C++的结构体构造方法的基本概念:结构体的构造方法需要和结构体的名字相同,并且无返回值,也不要void关键字,这样的方法就是构造器的 ...
- 虚拟机安装 Centos6
1 虚拟机安装 Centos6 1.1 前期配置 New Virtual Machine———Typical(典型安装) 选择镜像文件. 设置文件名,用户名和密码. 设置系统在虚拟机软件的名称, 设置 ...
- Nodejs的模块实现
在Node中引入模块,需要经历如下3个步骤:(1)路径分析(2)文件定位(3)编译执行 Node中模块分为两类: 一是Node提供的模块——核心模块.这部分在Node源代码的编译过程中,编译进了二进制 ...
- BitTorrent Sync - 神奇的文件同步软件,无需服务器让多台电脑互相同步!
176,487 微博 腾讯 空间 微信 141 49 如今人们对文件备份和同步的需求已经越来越强烈了.像 Dropbox 一样的云存储网盘有很多,但它们都有一个局限性,就是所有的文件都得经过它们的服务 ...
- apache 日志轮询 linux cronolog
Linux下运行的Web服务器Apache,默认日志文件是不分割的,一个整文件既不易于管理,也不易于分析统计.安装cronolog后,可以将日志文件按时间分割,易于管理和分析. cronolog安装配 ...
- 如何分析解读systemstat dump产生的trc文件
ORACLE数据库的systemstat dump生成trace文件虽然比较简单,但是怎么从trace文件中浩如烟海的信息中提炼有用信息,并作出分析诊断是一件技术活,下面收集.整理如何分析解读syst ...
- [Linux 性能检测工具]FREE
FREE NAME free显示系统可用内存和已使用内存 语法 free [-b | -k | -m] [-o] [-s delay ] [-t] [-l] [-V] 描述 free显示了总可用和被用 ...