其实上一个的鹰眼、比例尺、图例等都是小部件；这篇文章主要是页面布局设计，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

可以拖动、最大、最小

ArcGIS API For JavaScript 开发（三）使用小部件设计页面框架的更多相关文章

  1. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  2. ArcGIS API for javascript开发笔记（二）——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题

    感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...

  3. ArcGIS API for JavaScript开发初探——HelloMap

    1.前言 在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...

  4. ArcGIS API For JavaScript 开发（二）基础地图

    有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...

  5. ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

    1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...

  6. ArcGIS API for JavaScript开发初探——基础知识

    1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...

  7. ArcGIS API For JavaScript 开发（一）环境搭建

    标签:B/S结构开发,Asp.Net开发,WebGIS开发 前言:为什么写这个,一是学习:二是分享,共同进步,毕竟也是在这个园子里学到了很多: (一)环境搭建 集成开发环境:VS2013 Ultima ...

  8. ArcGIS API for javascript开发笔记（三）——解决打印输出的中文为乱码问题

    感谢一路走来默默支持和陪伴的你~~~ ----------------------欢迎来访,拒绝转载---------------------- 1.      调用ArcGIS API的Print实 ...

  9. ArcGIS API For JavaScript 开发（五）要素图层的编辑

    2018-4-3 这篇博客主要讲述要素的层的编辑功能,是基于FeatureLayer的applyEdit方法.由于自己目前正在学习当中,有许多不足之处请各位指出,欢迎指导学习! 主要功能是 1.将地图 ...

随机推荐

  1. 深入浅出RPC——浅出篇(转载)

    本文转载自这里是原文 近几年的项目中,服务化和微服务化渐渐成为中大型分布式系统架构的主流方式,而 RPC 在其中扮演着关键的作用. 在平时的日常开发中我们都在隐式或显式的使用 RPC,一些刚入行的程序 ...

  2. ThoughtWorks 面试备忘录

    ThoughtWorks 面试备忘录 前言 前段时间 ThoughtWorks 在网上和拉勾网合作搞了一次网络招聘,名为抛弃简历!让代码说话!,可谓赚足了眼球,很多程序猿纷纷摩拳擦掌.踊跃提交代码,在 ...

  3. Spring Boot的学习之路（03）：基础环境搭建，做好学习前的准备工作

    1. 前言 <论语·魏灵公>:"工欲善其事,必先利其器.居是邦也,事其大夫之贤者,友其士之仁者." 工欲善其事必先利其器.我们在熟悉一个陌生项目的时候,首先会大概去看一 ...

  4. 深入V8引擎-AST(2)

    先声明一下,这种长系列的大块头博客只能保证尽可能的深入到每一行源码,有些代码我不乐意深究就写个注释说明一下作用.另外,由于本地整理的比较好,博客就随心写了. 整个Compile过程目前只看到asmjs ...

  5. request - cookie操作(二)

    from urllib import request,parsefrom http.cookiejar import CookieJarheaders = { "User-Agent&quo ...

  6. wireshark数据包分析实战 第三、四章

    1,wireshark支持的协议上千种,开源的. 2,wireshark需要winpcap驱动支持.winpcap驱动的作用通过操作系统捕捉原始数据包.应用过滤器.将网卡切换为混杂模式. 3,捕获文件 ...

  7. 从零开始一起学习SALM-ICP原理及应用

    点"计算机视觉life"关注,星标更快接收干货! ## 小白:师兄,最近忙什么呢,都见不到你人影,我们的课也好久没更新了呢 师兄:抱歉,抱歉,最近忙于俗事.我后面一起补上,学习劲头 ...

  8. SCUT 130：对抗女巫的魔法碎片（贪心）

    https://scut.online/p/130 130. 对抗女巫的魔法碎片 题目描述 光明世界的一个国家发生动荡,女巫利用了邪恶的力量将国家的村庄都施下了咒语,好在国家还有英勇的士兵,他们正义的 ...

  9. Vue快速学习_第一节

    之前写CRM都是Django前后端一起写的,在大部分项目中实际上前后端是分离的,因此我们需要学习一个前端框架来进行前端页面的编写,这里选择了Vue进行学习,好了开始学习吧. 1.ES6部分知识点学习 ...

  10. 利用Python模拟GitHub登录

    最近学习了Fiddler抓包工具的简单使用,通过抓包,我们可以抓取到HTTP请求,并对其进行分析.现在我准备尝试着结合Python来模拟GitHub登录. Fiddler抓包分析 首先,我们想要模拟一 ...