AI 助理
文档备案控制台
开发者社区 云原生 容器服务 文章 正文

Dojo学习笔记（十）：Dojo布局——堆叠容器

2017-11-15 1649
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

    可以把小部件层叠在一起，而一次只显示一个屏面。

1 dijit.layout.AccordionContainer

    AccordionContainer 顾名思义是像手风琴一样可以收缩的面板，这种方式比较适合单个portal的布局，小巧易用；也可以用于整个页面的布局。

AccordionContainer申明方式样例：

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
<!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([ "dojo/parser" ,  "dijit/layout/AccordionContainer" ,  "dijit/layout/ContentPane" , "dojo/domReady!" ]);
     </script>
     <title>AccordionContainer学习</title>
</head>
<body  class = "soria" >
<div style= "width: 300px; height: 300px" >
     <div data-dojo-type= "dijit/layout/AccordionContainer"  style= "height: 300px;" >
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "标题1" >
             标题 1 内容
         </div>
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "标题2"  selected= "true" >
             标题 2 内容
         </div>
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "标题3" >
             <b>标题 3 内容</b>测试
         </div>
     </div>
</div>
</body>
</html>

AccordionContainer编程方式样例：

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/AccordionContainer" ,  "dijit/layout/ContentPane" ,  "dojo/domReady!" ],
                 function  (AccordionContainer, ContentPane) {
                     var  aContainer =  new  AccordionContainer({style:  "height: 300px" },  "myAccordionContainer" );
                     aContainer.addChild( new  ContentPane({
                         title:  "标题1" ,
                         content:  "标题1内容"
                     }));
                     aContainer.addChild( new  ContentPane({
                         title:  "标题2" ,
                         content:  "标题2内容" ,
                         selected: true
                     }));
                     aContainer.addChild( new  ContentPane({
                         title:  "标题3" ,
                         content:  "<b>标题3内容</b>测试"
                     }));
                     aContainer.startup();
                 });
     </script>
     <title>AccordionContainer学习</title>
</head>
<body  class = "soria" >
<div id= "myAccordionContainer"  style= "width: 300px; height: 300px" ></div>
</body>
</html>

输出：

wKiom1RAiNSQJkYzAACxJIJSlRM281.jpg

2 dijit.layout.TabContainer

    TabContainer的导航按钮在顶端一字排开，而AccordionContainer的导航按钮在面板内显示。

TabContainer申明方式样例：

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
<!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([ "dojo/parser" ,  "dijit/layout/TabContainer" ,  "dijit/layout/ContentPane" ]);
     </script>
     <title>TabContainer学习</title>
</head>
<body  class = "soria" >
<div style= "width: 350px; height: 300px" >
     <div data-dojo-type= "dijit/layout/TabContainer"  style= "width: 100%; height: 100%;" >
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "My first tab"  data-dojo-props= "selected:true" >
             Lorem ipsum and all around...
         </div>
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "My second tab" >
             Lorem ipsum and all around - second...
         </div>
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "My last tab"  data-dojo-props= "closable:true" >
             Lorem ipsum and all around - last...
         </div>
     </div>
</div>
</body>
</html>

TabContainer编程方式样例：

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
33
34
35
36
37
38
39
40
41
<!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/TabContainer" ,  "dijit/layout/ContentPane" ,  "dojo/domReady!" ],  function (TabContainer, ContentPane){
             var  tc =  new  TabContainer({
                 style:  "height: 100%; width: 100%;"
             },  "myTabContainer" );
             var  cp1 =  new  ContentPane({
                 title:  "My first tab" ,
                 content:  "Lorem ipsum and all around.."
             });
             tc.addChild(cp1);
             var  cp2 =  new  ContentPane({
                 title:  "My second tab" ,
                 content:  " Lorem ipsum and all around - second..."
             });
             tc.addChild(cp2);
             
             var  cp3 =  new  ContentPane({
                 title:  "My third tab" ,
                 content:  " Lorem ipsum and all around - third..." ,
                 closable: true
             });
             tc.addChild(cp3);
             tc.startup();
         });
     </script>
     <title>TabContainer学习</title>
</head>
<body  class = "soria" >
<div style= "width: 350px; height: 300px" >
     <div style= "width: 350px; height: 290px" >
         <div id= "myTabContainer" ></div>
     </div>
</div>
</body>
</html>

输出：

wKiom1RAje_xrkhmAACw-COU9H4781.jpg

2.1 tabPosition属性：String

    决定导航按钮相对于内容面板的位置，可取值："top", "bottom", "left-h", "right-h"。


2.2 doLayout属性：Boolean

    默认值为true，表示TabContainer高度与内容面板最大高度一致，为false表示TabContainer高度与当前内容面板高度一致。

    TabContainer可伸缩高度样例：

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
<!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([ "dojo/parser" ,  "dijit/layout/TabContainer" ,  "dijit/layout/ContentPane" ]);
     </script>
     <title>TabContainer学习</title>
</head>
<body  class = "soria" >
<div style= "width: 600px;" >
     <div data-dojo-type= "dijit/layout/TabContainer"  style= "width: 100%;"  doLayout= "false" >
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "My first tab"  data-dojo-props= "selected:true" >
             Lorem ipsum and all around...
         </div>
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "My second tab"  data-dojo-props= "closable:true" >
             Lorem ipsum and all around - second...<br />
             Hmmm expanding tabs......
         </div>
         <div data-dojo-type= "dijit/layout/ContentPane"  title= "My last tab" >
             Lorem ipsum and all around - last...<br />
             <br />
             <br />
             Hmmm even more expanding tabs......
         </div>
     </div>
</div>
</body>
</html>


2.3  selected属性：Boolean

    设置当前激活的Tab，与selectChild()方法类似。


    备注：dijit.layout.AccordionContainer和dijit.layout.TabContainer都继承dijit/layout/StackController，具有dijit/layout/StackController中dijit/layout/StackContainer.ChildWidgetProperties 属性的值。









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














文章标签：
JavaScript
容器
Web App开发
前端开发
技术小胖子
目录
相关文章
凉凉心.
|
12月前
|
Java 虚拟化 容器
（Java）Java里JFrame窗体的基本操作(容器布局篇-1)
容器 容器，我的理解是可以包容其他东西的玩意。它可以是一个盒子，可以是一个虚拟化的物品，可只要能包裹住其他存在质体的东西，那么都可以称作是容器。例如：JPanel组件和JScollPane组件两者都是容器也是组件。 既然有容器，那么容器中的布局就必不可少了。不然不规矩的摆放物品，人类看不习惯，我也看不习惯 ???? 本篇内容，将说明java JFrame窗体里容器中几类布局。 说明：所有在JFrame窗体里的容器布局都会使用setLayout()方法，采用的布局参数都将放进这个方法里 绝对布局 调用窗体容器
凉凉心.
301 1
1803944307596752
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器（前端视角篇）
本文由黑臂麒麟（6年前端经验）撰写，介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等，支持样式设置如字体颜色、大小和加粗等，并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等，支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时，Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例，适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
1803944307596752
1607 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器（前端视角篇）
全栈若城
|
设计模式 开发者 UED
123. [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战：新闻阅读应用侧边栏布局 基础篇
在现代移动应用和平板应用中，侧边栏导航已经成为一种常见且实用的UI设计模式。HarmonyOS NEXT提供了专门的`SideBarContainer`组件来实现这一功能，它能够轻松创建可显示和隐藏的侧边栏布局，非常适合新闻阅读、电子商务、文件管理等应用场景。
全栈若城
594 3
123. [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战：新闻阅读应用侧边栏布局 基础篇
全栈若城
|
UED 容器
124.[HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战：新闻阅读应用侧边栏布局 进阶篇
在基础篇中，我们学习了如何使用HarmonyOS NEXT的`SideBarContainer`组件创建新闻阅读应用的基本侧边栏布局。本篇教程将深入探讨如何为新闻阅读应用添加更多交互功能和状态管理，提升用户体验。
全栈若城
267 1
124.[HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战：新闻阅读应用侧边栏布局 进阶篇
全栈若城
|
UED 容器
10.HarmonyOS Next布局进阶：嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中，Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器，我们可以创建复杂而灵活的界面结构，满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局，以及如何合理分配和控制空间。
全栈若城
470 0
DuckBro
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
DuckBro
2090 3
DuckBro
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
DuckBro
3001 2
土木林森
|
容器 iOS开发 Linux
震惊！Uno Platform 响应式 UI 构建秘籍大公开！从布局容器到自适应设计，带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架，支持 Web、桌面（Windows、macOS、Linux）及移动（iOS、Android）等平台，仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践：利用布局容器（如 Grid）适配不同屏幕尺寸；采用自适应布局调整 UI；使用媒体查询定制样式；遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法，开发者可以为用户提供一致且优秀的多设备体验。
土木林森
814 0
一颗小谷粒
|
Java 容器
Java详解：GUI图形用户界面设计—容器组件及面板布局方式
Java详解：GUI图形用户界面设计—容器组件及面板布局方式
一颗小谷粒
765 0
啦啦啦191
|
Kubernetes Docker Python
Docker 与 Kubernetes 容器化部署核心技术及企业级应用实践全方案解析
本文详解Docker与Kubernetes容器化技术，涵盖概念原理、环境搭建、镜像构建、应用部署及监控扩展，助你掌握企业级容器化方案，提升应用开发与运维效率。
啦啦啦191
1499 108
云原生

容器服务

热门文章

最新文章

  • 1
    Minikube - Kubernetes本地实验环境
  • 2
    Docker的Windows容器初体验
  • 3
    Docker学习路线图 (持续更新中)
  • 4
    当 Kubernetes 遇到阿里云
  • 5
    基于Docker容器的，Jenkins、GitLab构建持续集成CI
  • 6
    谈谈 Docker Volume 之权限管理（一）
  • 7
    容器镜像服务 Docker镜像的基本使用
  • 8
    使用阿里云容器服务Jenkins 2.0实现持续集成之Pipeline篇(updated on 2016.12.23)
  • 9
    利用Helm简化Kubernetes应用部署
  • 10
    理解Docker容器的进程管理
  • 1
    wordpressHPA
    156
  • 2
    Kubernetes (K8s) 从入门到实战：命名空间、Pod、Controller、Service，图文并茂
    581
  • 3
    模型能装进显存，训练为什么还是 OOM？把 PyTorch 显存拆成 5 笔账
    304
  • 4
    边缘安全加速（ESA）技术解析与实战部署指南
    647
  • 5
    从0到1在云端部署Web应用：阿里云ECS全场景实战指南与2026省钱完全攻略
    594
  • 6
    WordPressACK
    779
  • 7
    [yahoon 原创] ArgoCD从内网的GitLab Repo部署应用
    538
  • 8
    实惠的云服务器推荐！！
    355
  • 9
    使用ASMGlobalRateLimiter实现基于调用来源和请求路径的精细化全局限流
    321
  • 10
    【赵渝强老师】Docker容器的跨节点通信
    490

    • 相关课程

    更多
  • 容器应用的高弹性架构
  • 容器应用更新与灰度发布
  • 容器应用与集群管理
  • 基于容器搭建企业级应用
  • 容器应用的高弹性架构

    • 相关电子书

    更多
  • 使用CNFS搭建弹性Web服务
  • 阿里云文件存储 NAS 在容器场景的最佳实践
  • 何种数据存储才能助力容器计算
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！