使用BorderContainer和ContentPane实现布局

1、效果图如下:

2、HTML代码:

<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">Sidebar content (left)</div>
<div id="rigthCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">Sidebar content (left)</div>
</div>

3、CSS:

html, body {
height: 100%;
margin:;
overflow: hidden;
padding:;
} #appLayout {
height: 100%;
}
#leftCol {
width: 14em;
}
.claro .demoLayout .edgePanel {
background-color: #d0e9fc;
}

4、引用

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

5、没有JS代码

dojo布局(layout)的更多相关文章

  1. Duilib源码分析(五)UI布局—Layout与各子控件

    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...

  2. jquery easy ui 1.3.4 布局layout(4)

    4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...

  3. [转]struct实例字段的内存布局(Layout)和大小(Size)

    在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...

  4. Extjs布局——layout: 'card'

    先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...

  5. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  6. WPF笔记(2.7 文字布局)——Layout

    原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...

  7. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  8. sencha touch 入门系列 (九) sencha touch 布局layout

    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...

  9. 前端框架 EasyUI (2)页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

随机推荐

  1. nginx secure_link下载防盗链

    下载服务器上有众多的软件资源, 可是很多来源不是本站,是迅雷.flashget, 源源不断的带宽,防盗链绝对是当务之急. 使用来源判断根本不靠谱,只能防止一些小白站点的盗链,迅雷之类的下载工具完全无效 ...

  2. Java的常用对象①②

    Java的常用对象① Java的常用对象有很多,这里只对lang包中常用的Object,Date(Calendar,DateFormat,Math),System,Runtime进行介绍.㈠Objec ...

  3. delphi.指针.PChar

    此文是delphi.指针.应用姊妹篇,想细化一下PChar应用,所以有了此文. 注意: 1:此文讲的是PChar与字符串相关操作,其它方法暂不多讲. 2:由于D分开Ansi/Unicode的两种完全不 ...

  4. UEFI+GPT引导实践篇(一):切换到UEFI启动,准备安装介质

    如果只单纯比较UEFI引导和BIOS引导,那么毫无疑问UEFI引导要简单很多.不过现在的主板大都是同时兼容BIOS和UEFI引导方式,所以在实际操作前还需要确认一些东西.详见下文. 1.我的电脑支不支 ...

  5. 十一、Manipulators

    1. Manipulators是可以用三维进行绘制的的节点,可以将用户行为值化,对其他节点的属性进行modify. 2. 属性值可以通过Channel Box 和Graph Editor进行修改.同其 ...

  6. Maven(一)maven环境搭建

    1.下载maven安装文件 https://maven.apache.org/download.cgi#,根据自己的需要下载对应版本 2. 配置maven环境变量,和java环境变量配置方式类似.   ...

  7. easyui datagrid columns field 如何支持一个或多个子属性

    //如果只需要一个子属性从value出发 {field:'customer',title:'会员手机',width:100, formatter: function(value,row,index){ ...

  8. iOS CoreAnimate 动画实现

    这里主要讲的是使用CoreAnimate实现所需的动画. 先上官网的介绍:https://developer.apple.com/library/ios/documentation/Cocoa/Con ...

  9. 【Linux】学习说明

    概述Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.多用户是指操作系统可以创建多个用户,用户可以并行的使用操作系 ...

  10. python模块之configparser

    configparser用于处理特定格式的文件,其本质上是利用open来操作文件. # 注释1 ; 注释2 [section1] # 节点 k1 = v1 # 值 k2:v2 # 值 [section ...