Dojo学习笔记（八）：Dojo布局――面板

发布时间：2020-12-16 21:25:49 所属栏目：百科来源：网络整理

导读：Dojo提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。 Dojo提供布局小部件分为三类：面板、对齐方式容器和堆叠容器。 1、dijit/layout/ConentPane ContentPane，顾名思义，就是用于放置若干内容的

Dojo提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。

Dojo提供布局小部件分为三类：面板、对齐方式容器和堆叠容器。

1、dijit/layout/ConentPane

ContentPane，顾名思义，就是用于放置若干内容的面板，是各种布局的基本元素。ContentPane 的功能类似于 iFrame。除此之外 ContentPane 还可以与其他 Layout 控件互相嵌套。

ContentPane声明法示例

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<styletype="text/css">
body{width:100%;height:100%;}
</style>
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true">
</script>
<scripttype="text/javascript">
dojo.require("dijit.layout.ContentPane");
</script>
<title>ContentPane学习</title>
</head>
<body>
<divdojoType="dijit.layout.ContentPane"id="myFirstContentPane"
href="TestContentPane.html">
</div>
</body>
</html>

ContentPane程序生成法示例

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<styletype="text/css">
body{width:100%;height:100%;}
</style>
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true">
</script>
<scripttype="text/javascript">
/*1.7以前版本http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html#dojo-domready
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function(){
varmyFirstContentPane=newdijit.layout.ContentPane({
id:"myFirstContentPane",href:"testcontentPane.html"
},dojo.byId("myFirstContentPane"));
myFirstContentPane.startup();
});
*/
require(["dijit/layout/ContentPane","dojo/domReady!"],function(ContentPane){
varmyFirstContentPane=newContentPane({
id:"myFirstContentPane",dojo.byId("myFirstContentPane"));
myFirstContentPane.startup();
});
</script>
<title>ContentPane学习</title>
</head>
<body>
<divid="myFirstContentPane">
</div>
</body>
</html>

输出结果：

说明：

（1）在这个例子中，ContentPane 完全实现了iFrame 的功能，但是有些区别，在代码中会把testcontentPane.html页面中的<title>测试</title>属性带过来。

（2）在使用程序生成法时，不要忘记startup()

1.1 Content属性：String,DomNode,NodeList

指ContentPane中显示的内容。如果没有定义 href 属性，ContentPane 组件内将显示 content 内容。否则将显示 href 页面的内容。content 可以是 String,DomNode 和 NodeList 三种类型。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<styletype="text/css">
body{width:100%;height:100%;}
</style>
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true">
</script>
<scripttype="text/javascript">
require(["dijit/layout/ContentPane",function(ContentPane){
//创建一个DomNode,table元素
varmyDomNode=document.createElement("table");
//Table的第一行是”Hello,DojoWorld!”
varmyTD1=document.createElement("td");
myTD1.innerHTML="Hello,DojoWorld!";
varmyTR1=document.createElement("tr");
myTR1.appendChild(myTD1);
myDomNode.appendChild(myTR1);
//Table的第二行是”Hello,ContentPaneWorld!”
varmyTD2=document.createElement("td");
myTD2.innerHTML="Hello,ContentPaneWorld!";
varmyTR2=document.createElement("tr");
myTR2.appendChild(myTD2);
myDomNode.appendChild(myTR2);
myDomNode.border=1;
//将创建的DomNode赋给content属性
varmyFirstContentPane=newContentPane({
id:"myFirstContentPane",//href:"TestContentPane.html"
content:myDomNode
},dojo.byId("myFirstContentPane"));
myFirstContentPane.startup();
});
</script>
<title>ContentPane学习</title>
</head>
<body>
<divid="myFirstContentPane">
</div>
</body>
</html>

输出结果：

Hello,Dojo World!

Hello,ContentPane World!

1.2 title属性：String

title属性定义了ContentPane的标题。这个标题只有当 ContentPane 作为 TabContainer/ StackContainer 等 Layout 控件的子控件时，才可以看到。此时该属性值显示于该 Tab 页的标题处。

<divclass="centerPanel"data-dojo-type="dijit.layout.TabContainer"data-dojo-props="region:'center',tabPosition:'bottom'">
<divdata-dojo-type="dijit.layout.ContentPane"title="Group1">
<h4>Group1Content</h4>
<p>Group1测试</p>
</div>
<divdata-dojo-type="dijit.layout.ContentPane"title="GroupTwo">
<h4>Group2Content</h4>
<p>Group2测试</p>
</div>
<divdata-dojo-type="dijit.layout.ContentPane"title="GroupThree">
<h4>Group3Content</h4>
<p>Group3测试</p>
</div>
</div>

输出结果：

1.3 loadingMessage/errorMessage属性：String

当ContentPane内容/页面加载中，或出现错误时，ContentPane 将会显示的内容。该信息可以在loading.js文件中更改。

myContentPane.attr("loadingMessage","StillLoading…");

1.4placeAt(reference,position)函数

这是一个常用的方法，dojo控件都实现了这个方法。运用这个方法可以自由地放置控件的位置。该方法有两个参数：reference,和 position。可以接受的 reference 参数类型有：String,DomNode 和 _Widget。其中 String 为引用 Dom 节点 (DomNode)，或者 dojo 控件 (_Widget) 的 id。而被position参数传入的dojo控件，必须是实现了addChild方法的类型，可接受的 position 参数类型有 Int和String。传入的 String 参数必须是”first”,”last”,”before”,”after”中的一个。

Parameter

Type

Description

reference

String | DomNode | _Widget

Widget,DOMNode,or id of widget or DOMNode

position

String | Int

Optional.

If reference is a widget (or id of widget),and that widget has an ".addChild" method,it will be called passing this widget instance into that method,supplying the optional position index passed. In this case position (if specified) should be an integer.

If reference is a DOMNode (or id matching a DOMNode but not a widget),the position argument can be a numeric index or a string "first","last","before",or "after",same as dojo/dom-construct::place().

myContentPane.placeAt("OuterContentPane","first");

该例子中，myContentPane 将被嵌套放入 OuterContentPane 的第一个位置。

1.5 attr(name,value)函数

attr是常用的dojo控件通用方法，用于为 dojo 控件的属性赋值。如：_Widget.attr(“value”,3) 相当于 _Widget.setValue(3)。在新的版本中，许多用于修改属性的方法被不推荐了，如 setValue,setHref 等，均由 attr(“value”,value),attr(“href”,href) 方法取代。

Parameter

Type

Description

name

String | Object

The property to get or set. If an object is passed here and not a string,its keys are used as names of attributes to be set and the value of the object as values to set in the widget.

value

Object

Optional.

Optional. If provided,attr() operates as a setter. If omitted,the current value of the named property is returned.

备注：dojox.layout.ContentPane扩展了dijit.layout.ContentPane。

2 dijit/TitlePane

TitlePane本质上仍然是一个ContentPane,不同点是，TitlePane自带了Title 的显示。标题栏中包括一按钮与一标题，通过按钮可控制显示或隐藏内容。在 TitlePane 中，title 属性定义了显示的标题。

<!DOCTYPEHTML>
<htmllang="en">
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require(["dijit/TitlePane","dojo/parser"]);
</script>
<title>TitlePane学习</title>
</head>
<bodyclass="soria">
<divid="myTitlePane"style="border:solidblack1px;">
<pid="last">HelloTitlePane!</p>
<divdata-dojo-type="dijit/TitlePane"data-dojo-props="title:'Pane#1'">
I'mpane#1
</div>
<divdata-dojo-type="dijit/TitlePane"data-dojo-props="title:'Pane#2'">
I'mpane#2
</div>
<divdata-dojo-type="dijit/TitlePane"data-dojo-props="title:'Pane#3'">
I'mpane#3
</div>
</div>
</body>
</html>

输出结果：

2.1 duration属性：number

收起和打开 TitlePane，是一个动画过程，duration 定义了该动画持续的时间，单位是毫秒。

myTP.attr("duration",1000);

3 dojox/layout/FloatingPane

FloatingPane是可以随意移动的TitlePane，可以模拟Windows窗口效果的浮动面板，可以在页面上随意拖拽该面板，该面板具有最基本的最小化、还原、最大化和关闭按钮等，可以改变大小，可以嵌套内部窗口，可以打开其他页面等。

FloatingPane声明法示例：

<!DOCTYPEHTML>
<htmllang="en">
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<linkrel="stylesheet"type="text/css"href="dojox/layout/resources/FloatingPane.css">
<linkrel="stylesheet"type="text/css"href="dojox/layout/resources/ResizeHandle.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require(["dojox/layout/FloatingPane","dojo/parser"]);
</script>
<title>FloatingPane学习</title>
</head>
<bodyclass="soria">
<divdojoType="dojox.layout.FloatingPane"id="myFloatingPane"
title="FloatingWorld"closable="true"
resizable="true"dockable="true"
style="position:absolute;top:0;left:0;width:150px;height:150px;">
TheContentoftheFloatingWorld!
</div>
</body>
</html>

FloatingPane程序生成法示例：

<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<linkrel="stylesheet"type="text/css"href="dojox/layout/resources/FloatingPane.css">
<linkrel="stylesheet"type="text/css"href="dojox/layout/resources/ResizeHandle.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require(["dojox/layout/FloatingPane","dojo/parser",function(FloatingPane){
varmyFP=newFloatingPane({
id:"myFloatingPane",content:"TheContentoftheFloatingWorld!",resizable:true,dockable:true,title:"FloatingWorld",closable:true,style:{position:"absolute",top:0,left:0,width:"150px",height:"150px"}
},dojo.byId("myFloatingPane")
);
myFP.startup();
});
</script>
<title>FloatingPane学习</title>
</head>
<bodyclass="soria">
<divid="myFloatingPane">
TheContentoftheFloatingWorld!
</div>
</body>
</html>

运行结果：

上面创建方法得到的FloatingPane显示如下图所示，用户可以自由地在它的外层容器中移动位置。

说明：

（1）必须引用 FloatingPane.css；

（2）如果需要具备改变容器大小 (resize) 功能，需引用 ResizeHandle.css；

（3）Dojo建议在动态创建小部件结束后，调用startup()。

3.1 closable属性：boolean

closable 属性定义了该面板是否可以被关闭。

3.2 resizable属性：boolean

该属性定义了FloatingPane是否可以在运行时改变大小。当 resizable 为 true 并引用了 ResizeHandle.css时，用户可以通过拖动控制点来改变面板的大小。

3.3 dockable属性：boolean

该属性定义了FloatingPane是否可以被最小化到页面的最下方。与 TitlePane 可以收起面板不同的是，FloatingPane 可以将面板最小化到页面的最下方，如同 Windows 的工具栏。当dockable为true 时，用户可以通过点击面板标题位置向下的三角来最小化面板。

3.4 sytle属性：object

该属性定义了面板的位置。其中position定义是绝对位置还是相对位置，top和left定义了面板左上角的位置，width和height定义了面板的大小。但当面板被拖动或改变大小时，该值不会跟着变化。

4dojox/layout/ExpandoPane

与ContentPane基本类似，不过可以展开或折叠，不可以包含其他布局小部件。

<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<linkrel="stylesheet"type="text/css"href="dojox/layout/resources/ExpandoPane.css">
<styletype="text/css">
html,body{
width:100%;
height:100%;
margin:0;
}
#borderContainer{
width:100%;
height:100%;
}
</style>
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require(["dijit/layout/ContentPane","dijit/layout/BorderContainer","dojox/layout/ExpandoPane","dojo/domReady!"]);
</script>
<title>ExpandoPane学习</title>
</head>
<bodyclass="soria">
<divdata-dojo-type="dijit.layout.BorderContainer"data-dojo-props="design:'sidebar',gutters:true,liveSplitters:true"id="borderContainer">
<divdata-dojo-type="dojox.layout.ExpandoPane"title="LeftExpando"data-dojo-props="title:'LeftExpando',maxWidth:225,splitter:true,region:'leading'"style="width:225px;">
Hi.I'mtheExpandoPane
</div>
<divdata-dojo-type="dijit.layout.ContentPane"data-dojo-props="splitter:true,region:'center'">Hi,I'mcenter</div>
</div>
</body>
</html>

输出结果：

5dojox/layout/ScrollPane

ScrollPane是可以滚动的面板。当面板内容超出了面板显示范围时，使用 ScrollPane 可以让内容滚动起来。

<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<linkrel="stylesheet"type="text/css"href="dojox/layout/resources/ScrollPane.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require(["dijit/TitlePane","dojox/layout/ScrollPane","dojo/domReady!"]);
</script>
<title>ScrollPane学习</title>
</head>
<bodyclass="soria">
<divstyle="float:left;padding-right:12px;">
<divdojoType="dojox.layout.ScrollPane"style="width:150px;height:300px;"orientation="vertical"id="vert">
<tableid="tableinvert">
<tr>
<td>
<divdojoType="dijit.TitlePane"title="1"sytle="width:100%;height:100%;">titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="2"sytle="width:100%;height:100%;">
titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="3"sytle="width:100%;height:100%;">titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="4"sytle="width:100%;height:100%;">
titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="5"sytle="width:100%;height:100%;">
titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="6"sytle="width:100%;height:100%;">
titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="7"sytle="width:100%;height:100%;">
titlePanecontent
</div>
</td>
</tr>
<tr>
<td>
<divdojoType="dijit.TitlePane"title="8"sytle="width:100%;height:100%;">
titlePanecontent
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

结果：

说明：必须引用dojox/layout/resources/ScrollPane.css，否则在面板内容滚动时，不会显示滚动滑块。

5.1 orientation属性：String

定义了ScrollPane的滚动方向，有vertical和horizontal两种选择。需要注意的是，滚动的方向必须出现内容显示不下的情况，否则SrollPane的显示效果和ContentPane没有区别。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!