ArcGIS API For JavaScript 开发（三）使用小部件设计页面框架

其实上一个的鹰眼、比例尺、图例等都是小部件；这篇文章主要是页面布局设计，dojo提供了非常多的小部件，从功能的角度可以分为3大类：表单小部件、布局小部件和应用小部件。

表单小部件于HTML中的表单部件。

布局小部件主要有3类，主要在dijit中：

面板：盛放和显示大块的内容，包括文本、图片、图表以及其他小部件。类的小部件有ContentPane、FloatingPane和ExpandoPane，后面两个位于DojoX中。

对齐方式容器：BorderContainer、LayoutContainer与SplitContainer。

堆叠容器：此类小部件可以把前面的小部件层叠在一起，而一次只显示一个屏面。AccordionContainer、TabContainer、StackContainer。

使用面板组织页面元素

最常用的面板是ContentPane，在dojo中有两个ContentPane的实现，一个是dijit/layout/ContentPane ；另一个是 dojox/layout/ContentPane ，后者扩展了前者。当提及ContentPane，如果不特别说明，就是值的前者，也就是dijit中的ContentPane。

Dijit/TitlePane与ContentPane基本类似，只是在ContentPane的基础上增加了一个标题栏，其中包含一个标题和一个按钮，按钮的作用是隐藏或显示其内容。

Dojo/layout/FloatingPane 是可以模拟Windows窗口效果的浮动面板，dojo/layout/ExpandoPane 也与 ContentPane 基本类似，但是可以折叠或展开，并可以包含其他布局小部件。

ContentPane

是所有布局小部件的基石

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>面板ContentPage的Demo</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.9/"></script>

    <script>
        dojoConfig = { isDebug: true, async: true };
    </script>

    <script>
        require([
            "dojo/parser", "dijit/layout/ContentPane", "dijit/form/Button",
            "dojo/domReady!"
        ], function (parser) {
            parser.parse();
        });
    </script>

</head>
<body>
    <div data-dojo-type="dijit/layout/ContentPane" style="width:100px;height:200px;float:left;">
        <div data-dojo-type="dijit/form/Button">相关的信息</div>
    </div>
</body>
</html>

 

注意的是在<html>标签中加入lang=en，但是在使用dojo小部件的时候一定要去掉，否则会出现“dojo/parser::parse() error”错误。如果要加入lang=en ，那么在dojoConfig中也要添加 lang：'en'。

然后还有一点就是由于使用了 data-dojo-type 标签属性使用了dojo小部件，但是由于这个不是标准的HTML，浏览器不能直接解析dojo的小部件，所以需要使用dojo/parser的功能来解析。没错，dojo/parser的parse() 方法就是用于解析小部件的标签属性。

 

FlaotingPane

可以拖动、最大、最小

posted @ 2018-02-06 16:29  CreateFree  阅读(402)  评论(0)  编辑  收藏  举报