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

    1.Flask-Session from flask import session,Flask from flask_session import Session #导入 from redis imp ...

  2. Java基础(二) 基本类型数据类型、包装类及自动拆装箱

    我们知道基本数据类型包括byte, short, int, long, float, double, char, boolean,对应的包装类分别是Byte, Short, Integer, Long ...

  3. serverless 项目配置及创建helloworld应用(二)

    阅读目录 一:学习使用AWS Lambda来作为服务器引擎 二:使用serverless环境搭建 三:创建我们的第一个应用,hello world 服务 回到顶部 一:学习使用AWS Lambda来作 ...

  4. kubernetes实战篇之部署一个.net core微服务项目

    目录 继上一篇kubernetes理论知识完结.本篇主要讲解基于nexus搭建一个docker镜像仓库(当然大家实践过程是不必完全跟着做,也可以搭建harbor仓库或者直接把镜像推送到docker h ...

  5. 读书笔记——《谁说菜鸟不会数据分析—Python篇》

    最近刚读完一本新书,关注的公众号作者出的“谁说菜鸟不会数据分析—Python篇”,话说现在很多微信公众号大牛都在出书,这貌似是一个趋势.. 说说这本书吧,我之前看过一些网文,对于数据分析这一块也有过一 ...

  6. 布隆过滤器 - 如何在100个亿URL中快速判断某URL是否存在?

    题目描述 一个网站有 100 亿 url 存在一个黑名单中,每条 url 平均 64 字节.这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单中? 题目解析 这 ...

  7. 为什么建议大家使用 Linux 开发

    Linux 能用吗? 我身边还有些朋友对 linux 的印象似乎还停留在黑乎乎的命令行界面上.当我告诉他或者建议他使用 linux 时,会一脸惊讶的问我,那个怎么用(来开发或者日常使用)? Linux ...

  8. C# 位运算及实例计算

    前言: 平时在实际工作中很少用到这个,虽然都是一些比较基础的东西,但一旦遇到了,又不知所云.刚好最近接触了一些相关这方面的项目,所以也算是对 这些内容重新温习实践了一遍.所以这篇不仅作为个人备忘,也分 ...

  9. python初识(3)

    bool 字符串 for循环 bool 数字非零全都是True 字符串非空全都是True 字符串 索引 从0开始 0 切片选取 [x:y] 左闭右开区间 [x:y:z] 选取x到y之间 每隔z选取一次 ...

  10. find文件删除

    find /root/title/test -type f -name '*.txt' -exec rm {} \;   查找并删除test文件夹下所有txt文件 find /root/title/t ...