Dojo学习笔记(九):Dojo布局——对齐方式容器

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介:

    用以盛放小部件,可以设置这些小部件的排列方式。

1 dijit/layout/BorderContainer

    BorderContainer是一个布局容器,,它将容器内容分为 5 个区域:左 (left/leading), 右 (right/trailing), 上 (top), 下 (bottom), 中 (Center),如下图所示。

wKiom1Q_qK3z86mjAABmV9qOuMA814.jpg


     BorderContainer有两种不同的方式安排子元素的位置,通过design属性来控制,该属性的值可以是headline(默认值)或sidebar。选用 headline 布局方式时,上下区域与 BorderContainer 同宽。选用sidebar布局方式时,左右区域与BorderContainer同高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
     <meta charset= "UTF-8" >
     <link rel= "stylesheet"  href= "dijit/themes/soria/soria.css" >
     <script type= "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" ></script>
     <script type= "text/javascript" >
         require([ "dijit/layout/BorderContainer" , "dijit/layout/ContentPane" , "dojo/parser" "dojo/domReady!" ]);
     </script>
     <title>BorderContainer学习</title>
</head>
<body  class = "soria" >
<div dojoType= "dijit.layout.BorderContainer"  design= "sidebar"  gutters= "true"
      liveSplitters= "true"  id= "borderContainer"  style= "width: 400px; height: 300px;" >
     <div dojoType= "dijit.layout.ContentPane"  splitter= "true"  region= "leading"   style= "width: 100px;" >
         Leading Region
     </div>
     <div dojoType= "dijit.layout.ContentPane"  splitter= "true"  region= "trailing"  style= "width: 100px;" >
         Tailing Region
     </div>
     <div dojoType= "dijit.layout.ContentPane"  splitter= "true"  region= "center" >
         Center Region
     </div>
     <div dojoType= "dijit.layout.ContentPane"  splitter= "true"  liveSplitters= "true"    region= "top" >
         Top Region
     </div>
     <div dojoType= "dijit.layout.ContentPane"  splitter= "true"  region= "bottom" >
         Bottom Region
     </div>
</div>
</body>
</html>

1.1 liveSpliter属性:Boolean

    该属性定义了当用户拖动区域边界时,容器内区域大小是随着鼠标的移动改变 (liveSpliter = true,默认值),还是只有到鼠标松开时,才执行容器内区域大小的修改 (liveSpliter = false)。


1.2 gutters属性:Boolean

    该属性定义了 BorderContainer 是否具有边界和留白,true(默认值)表示具有,false表示没有。


1.3 spliter属性:Boolean 与 region属性:String

    这两个属性是为嵌套在 BorderContainer 内部的区域定义的。region 定义内部区域位置 (top, bottom, left, right, leading, trailing, center),spliter 定义是否可以通过拖动区域边界修改区域大小。


2 dijit/layout/LayoutContainer

    通过设置 layoutAlign="left"的属性来定义每个对象的具体位置;可以重复使用 layoutAlign = "left",这样的结果根据声明的先后顺序从左至右,从上至下的进行排列。这种布局方式比较简单,不需要考虑每个待布局对象的具体位置,只需要考虑对象之间的相对位置就可以了,比较适合于对整个页面进行布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<html>
<head>
     <meta charset= "UTF-8" >
     <link rel= "stylesheet"  href= "dijit/themes/soria/soria.css" >
     <style type= "text/css" >
         html, body {
             width:  100 %;
             height:  100 %;
             margin:  0 ;
             overflow:hidden;
         }
         #layoutContainer {
             width:  100 %;
             height:  100 %;
         }
     </style>
     <script type= "text/javascript"  src= "dojo/dojo.js"  djConfig= "parseOnLoad:true" ></script>
     <script type= "text/javascript" >
         require([ "dijit/layout/LayoutContainer" , "dijit/layout/ContentPane" , "dojo/parser" "dojo/domReady!" ]);
     </script>
     <title>LayoutContainer学习</title>
</head>
<body  class = "soria" >
<div data-dojo-type= "dijit/layout/LayoutContainer"  data-dojo-props= "design:'sidebar'"  id= "layoutContainer" >
     <div data-dojo-type= "dijit/layout/ContentPane"  data-dojo-props= "region:'leading'"  style= "background-color: #00eeff;" >Hi, I'm leading pane</div>
     <div data-dojo-type= "dijit/layout/ContentPane"  data-dojo-props= "region:'center'"  style= "background-color: #FFF0B4;" >Hi, I'm center pane</div>
</div>
</body>
</html>

输出:

wKioL1RAgSLBfv9iAACRgatjuzs982.jpg


 备注:Dojo不推荐使用dijit/layout/LayoutContainer和dijit/layout/SplitContainer,从1.1及以后版本采用BorderContainer代替。








     本文转自stock0991 51CTO博客,原文链接:http://blog.51cto.com/qing0991/1564930,如需转载请自行联系原作者









目录
打赏
0
相关文章
|
6月前
|
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
517 3
|
6月前
|
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
535 2
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
261 0
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
210 0
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
109 0
Ubantu docker学习笔记(九)容器监控 自带的监控+sysdig+scope+cAdvisor+prometheus
Ubantu docker学习笔记(九)容器监控 自带的监控+sysdig+scope+cAdvisor+prometheus
Ubantu docker学习笔记(六)容器数据卷——补充实验
Ubantu docker学习笔记(六)容器数据卷——补充实验
ubuntu22 编译安装docker,和docker容器方式安装 deepseek
本脚本适用于Ubuntu 22.04,主要功能包括编译安装Docker和安装DeepSeek模型。首先通过Apt源配置安装Docker,确保网络稳定(建议使用VPN)。接着下载并配置Docker二进制文件,创建Docker用户组并设置守护进程。随后拉取Debian 12镜像,安装系统必备工具,配置Ollama模型管理器,并最终部署和运行DeepSeek模型,提供API接口进行交互测试。
172 15
《docker高级篇(大厂进阶):7.Docker容器监控之CAdvisor+InfluxDB+Granfana》包括:原生命令、是什么、compose容器编排,一套带走
《docker高级篇(大厂进阶):7.Docker容器监控之CAdvisor+InfluxDB+Granfana》包括:原生命令、是什么、compose容器编排,一套带走
307 78

热门文章

最新文章