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
可以拖动、最大、最小
ArcGIS API For JavaScript 开发（三）使用小部件设计页面框架的更多相关文章
- ArcGIS API for JavaScript开发环境搭建及第一个实例demo
原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...
- ArcGIS API for javascript开发笔记（二）——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...
- ArcGIS API for JavaScript开发初探——HelloMap
1.前言 在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...
- ArcGIS API For JavaScript 开发（二）基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现
1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...
- ArcGIS API for JavaScript开发初探——基础知识
1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...
- ArcGIS API For JavaScript 开发（一）环境搭建
标签:B/S结构开发,Asp.Net开发,WebGIS开发 前言:为什么写这个,一是学习:二是分享,共同进步,毕竟也是在这个园子里学到了很多: (一)环境搭建 集成开发环境:VS2013 Ultima ...
- ArcGIS API for javascript开发笔记（三）——解决打印输出的中文为乱码问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------欢迎来访,拒绝转载---------------------- 1. 调用ArcGIS API的Print实 ...
- ArcGIS API For JavaScript 开发（五）要素图层的编辑
2018-4-3 这篇博客主要讲述要素的层的编辑功能,是基于FeatureLayer的applyEdit方法.由于自己目前正在学习当中,有许多不足之处请各位指出,欢迎指导学习! 主要功能是 1.将地图 ...
随机推荐
- CAP碎碎念
整个2017年都在搞大数据平台,完全远离了机器学习,甚至都不记得写过类似ETL的job. 从数据到平台,从业务处理到基础服务. Metrics的收集,报警,生成报表.Data pipeline的准确性 ...
- javascript 实现ajax
AJAX 英文名称 Asynchronous JavaScript and XML即异步的 JavaScript 和 XML AJAX 是与服务器交换数据并更新部分网页一门无刷新技术构建自己的ajax ...
- spark开发常见问题之一：java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.
最近在学习研究pyspark机器学习算法,执行代码出现以下异常: 19/06/29 10:08:26 ERROR Shell: Failed to locate the winutils binary ...
- Hive学习之路（一）—— Hive 简介及核心概念
一.简介 Hive是一个构建在Hadoop之上的数据仓库,它可以将结构化的数据文件映射成表,并提供类SQL查询功能,用于查询的SQL语句会被转化为MapReduce作业,然后提交到Hadoop上运行. ...
- java模拟键鼠操作
很久之前百度的,所以忘记了作者,所以仅作为自己的日记纪录在此: package com.robot.test;import java.awt.AWTException;import java.awt. ...
- centos7.3 格式化和挂载数据盘
本文使用 fdisk 命令对小于 2 TiB 的数据盘执行分区操作. 1. 运行 fdisk -l 命令查看实例是否有数据盘 2. 创建一个单分区数据盘,依次执行以下命令: 运行 fdisk /d ...
- 一文学会Java死锁和CPU 100% 问题的排查技巧
做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开 工欲善其事,必先利其器 00 本文简介 作为一名搞技术的程序猿或者是攻城狮,想必你应该是对下面这两个问题有所了解,说不定你在 ...
- C++ 洛谷P1230 智力大冲浪
题目描述 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每个参赛者m元.先不要太高兴!因为这些钱还不一定都是你的?!接下来主持人宣布了比赛规则: ...
- Java 中的字符串(String)与C# 中字符串(string)的异同
1. C# 中比较两个字符串字面量是否相等,可以使用 “==”比较运算符,是因为string 类型重写(override)了“==” 和 “!=” 运算符,在使用“==” 和 “!=” 进行字符串比较 ...
- 阿里云域名的ssl证书申请与腾讯服务器域名的证书安装
阿里云域名中的SSL证书申请,腾讯云服务器中的证书安装: 因为公司的与域名都在阿里云上面,服务器却用的是腾讯云的.记得前2年用阿里云管理平台的时候,域名的SSL证书都很好找,也许是长时间不用,找SSL ...