ArcGIS API For JavaScript官方文档之Dojo——⑤Dojo Layouts

最新推荐文章于 2018-07-14 18:23:54 发布

不睡觉的怪叔叔

最新推荐文章于 2018-07-14 18:23:54 发布

阅读量1.1k

点赞数

分类专栏： ArcGIS API For JavaScript

31 篇文章 44 订阅

订阅专栏

Dojo layout dijits

1、使用Dijit layout widgets

dojo的layout dijits提供了一种使用最少努力创建灵活布局的方法。ArcGIS JavaScript API 包含DOJO UI库，因此您可以使用Dojo layout dijits创建应用程序，这些应用程序将map和分析功能整合到一个可视化且具有吸引力的设计中。

ArcGIS JavaScript API的示例提供了一种很好的方法来学习如何使用api中可用的特定map和分析功能。不幸的是，当构建具有此功能的web应用程序时，有时需要花费更多的时间来解决如何安排页面上的各种HTML UI元素，而不是使用arcgis JavaScript编写代码。

除了用于用户交互的map或者显示分析结果的元素之外，每个应用程序通常都提供一个或多个UI元素。由于arcgis javascript api包含了所有dojo UI库，所以您可以使用Dojo BorderContainer轻松地以标准方式列出这些元素。

每个BorderContainer中的实例允许最多5个不同区域：top、bottom、right、left和center。每个区域通常包含下列dojo布局元素之一：

若要将一个区域分为多个部分，您可以创建嵌套的BorderContainers。

BorderContainer的"design"属性定义了如何排列子元素。"design"属性的有效值为"headline"和"sidebar"。如果值设置为headline，则top和bottom区域优先，并拉伸至100%width。

将"design"属性值设置为"sidebar"，将right和left区域延伸至100%的height。

每个子元素的位置都是用"region"属性设置的。需要注意的是，对于top和bottom区域，您不应该设置宽度，只设置高度。对于right和left区域不设置高度，只设置宽度。中心区域不应该设置宽度或高度，因为该元素将填充剩余空间。

设计考虑：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

<body class="soria" style="background-color: steelblue; overflow: hidden;">

<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 96%; height: 95%;
margin: 2%; border:solid 3px silver;">

使用Dojo ContentPane来为map div使用，因此它与其他UI元素相对正确地定位。ContentPane提供了一个“resize”事件来重新定位和调整地图大小。

<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:solid thin silver;
overflow:hidden;"></div>

帮助文档的示例代码部分包含几个布局示例，这些示例展示使用BorderContainer构建的简单用户界面。

关注