Dojo学习笔记(十):Dojo布局——堆叠容器

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

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

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,如需转载请自行联系原作者














目录
打赏
0
0
0
0
347
分享
相关文章
|
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接口进行交互测试。
170 15
《docker高级篇(大厂进阶):7.Docker容器监控之CAdvisor+InfluxDB+Granfana》包括:原生命令、是什么、compose容器编排,一套带走
《docker高级篇(大厂进阶):7.Docker容器监控之CAdvisor+InfluxDB+Granfana》包括:原生命令、是什么、compose容器编排,一套带走
307 78

热门文章

最新文章