布局 - 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 ...
随机推荐
- c中的数据类型、常量、变量
一. 数据 1. 什么是数据 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据.图片数据.视频数据,还有聊QQ时产生的文 ...
- 基于ruby的watir自动化测试 笔记二
基于ruby的watir自动化测试 笔记一的补充版,新增加了些特殊的控件捕获方法.还在更新中.... attribute_value 获取当前控件的属性 Value = ie.link(:id=> ...
- Listener监听器与Filter过滤器
1.Listener [1]监听器简介 > Listener是JavaWeb的三大组件之一,Servlet.Filter.Listener > Li ...
- msbuild ConfuserEx.Build 加密
https://www.nuget.org/packages/ConfuserEx.Build/ <?xml version="1.0" encoding="utf ...
- AngularJS 简介
AngularJS 是一个 JavaScript 框架. 它可通过 <script> 标签添加到 HTML 页面. <script src="http://apps.bdi ...
- Enabling Cross-Origin Requests in ASP.NET Web API 2
Introduction This tutorial demonstrates CORS support in ASP.NET Web API. We’ll start by creating two ...
- PHP MSSQL 分页实例(刷新)
<?php/* '页面说明:*/ $link=mssql_connect("MYSQL2005","sa","123456") or ...
- Vim光标定位
*定位到指定行n: 输入"nG". 或输入"ngg". 或输入":n" 这里,n就是指定的行的行号.注意,有时候G=gg. *跳到屏幕顶部: ...
- mysql优化之索引篇
对mysql优化是一个综合性的技术,主要包括 a: 表的设计合理化(符合3NF) b: 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引unique.全文索引] c: 分表技术(水平 ...
- JAVA 基本运算符(摘)
(搞自:Java经典入门教程) http://wenku.baidu.com/link?url=IoWI58cD5vzeHN-NL4pN7Gren-RfzydrhjDlETAByC9L-9ANinyL ...