其实上一个的鹰眼、比例尺、图例等都是小部件；这篇文章主要是页面布局设计，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. spring 5.x 系列第11篇 —— 整合memcached (xml配置方式)

    文章目录 一.说明 1.1 XMemcached客户端说明 1.2 项目结构说明 1.3 依赖说明 二.spring 整合 memcached 2.1 单机配置 2.2 集群配置 2.3 存储基本类型 ...

  2. 【Zookeeper02】ZK的作用以及使用

    上一篇介绍了ZK的安装以及集群的搭建,这只能算是个软件安装过程,具体是做什么的.怎么用也没有做解释,这一篇中博主就自己的私人理解简单写一下: 1.是什么: a.Zookeeper是一个分布式协调服务, ...

  3. 【需要重新维护】Redis笔记20170811视频

    很多内容都是抄的,个人记录 1.windows下初见 安装 进入目录 修改配置文件(暂时使用默认,未配置环境变量) 目录下:redis-server.exe启动服务 新建命令提示符,目录下,redis ...

  4. jQuery入门——选择器

    jQuery选择器可以分为四类:基础选择器,层级选择器,属性选择器,过滤选择器 基础选择器: <!DOCTYPE html> <html> <head> <m ...

  5. PATB 1038. 统计同成绩学生(20)

    https://www.patest.cn/contests/pat-b-practise/1038 #include <cstdio> int cnt[110]; int temp[10 ...

  6. Matplotlib快速入门

    Matplotlib 可能还有小伙伴不知道Matplotlib是什么,下面是维基百科的介绍. Matplotlib 是Python编程语言的一个绘图库及其数值数学扩展 NumPy.它为利用通用的图形用 ...

  7. Appium+python自动化（十三）- 与Capability完美懈垢之解读（超详解）

    简介 Capability又叫Appium Desired Capabilities,前边写了那么多实例代码,小伙伴可以发现一些规律,就是有一部分代码总是重复的出现在你的视线中.这部分就是对Capab ...

  8. 安装Ruby、多版本Ruby共存、Ruby安装慢问题

    rbenv rbenv可以管理多个版本的ruby.可以分为3种范围(或者说不同生效作用域)的版本: local版:本地,针对各项目范围 global版:全局,没有shell和local版时使用glob ...

  9. Python浮点数（小数）运算误差的原因和解决办法

    原因解释:浮点数(小数)在计算机中实际是以二进制存储的,并不精确.比如0.1是十进制,转换为二进制后就是一个无限循环的数:0.0001100110011001100110011001100110011 ...

  10. 并发编程-concurrent指南-计数器CountDownLatch

    java.util.concurrent.CountDownLatch 是一个并发构造,它允许一个或多个线程等待一系列指定操作的完成. CountDownLatch 以一个给定的数量初始化.count ...