5/5更新。BorderContainer自适应在本地时正常使用的方法，请查看原文代码之前那一段话
（60）创建一个饼形图
比较简单的标签声明法：（只需要修改数据即可）
①首先，加载dojo文件和样式文件：（关于style.css，需要根据自己找到的路径修改，或者使用我从官网上找到的链接：https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/style.css）
<link rel="stylesheet" href="style.css" media="screen">
<script>var dojoConfig = { parseOnLoad: true }</script>
<script src="js/dojo-1.10.5/dojo/dojo.js" data-dojo-config="isDebug: true ,async: true"></script>
②插件：
require([ "dojo/parser", //插件 "dojox/charting/widget/Chart", //2d模块 "dojox/charting/themes/Claro", //样式 "dojox/charting/plot2d/Pie" //饼图类型的图 ]);
③插入的HTML标签：
<!-- 父标签 --> <div data-dojo-type="dojox/charting/widget/Chart" data-dojo-props="theme:dojox.charting.themes.Claro" style="width:550px; height: 550px;"> <!-- 饼图的文字 --> <div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div> <!-- 饼图的数据 --> <div class="series" name="Last Week's Visits" array="chartData"></div> </div>
注：
<1>父标签的style中的width和height，影响饼图和其背景图大小，饼图大小主要受其中更小的那个影响；
<2>饼图文字的radius根据我自己观察，数值越大，饼图越明亮；而fontColor影响饼图的文字颜色；
<3>labelOffset影响饼图相对于文字的偏移。就是说，文字的位置不变，这个数字越小（-20——》-120），那么饼图就越小（外围和文字更远了）；
<4>饼图数据数据的array中的chartData，指的是饼图的数据来源的变量名（见下）
④数据：
chartData = [
{ x: 1, y: 19021,text:"a",color:"red"},
{ x: 1, y: 12837 },
{ x: 1, y: 12378 },
{ x: 1, y: 21882 },
{ x: 1, y: 17654 },
{ x: 1, y: 15833 },
{ x: 1, y: 11122 }
];
说明：
<1>由于是饼图，所以x坐标不影响，主要受y坐标影响（注意是y，而不是第二个参数）；
<2>text的值，是显示在饼图外围的值；
<3>color属性的值，影响饼图对应块的颜色
编程法：（更复杂一些，但是更可控）
①HTML代码：
<div id="chartNode" style="width: 550px; height: 550px;"></div>
②数据（同上的charData）
③dojo代码：
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro", //参数theme
"dojox/charting/plot2d/Pie",
"dojo/domReady!"], function(Chart, theme, PiePlot)
{
var pieChart = new Chart("chartNode"); //在指定节点创造变量
pieChart.setTheme(theme); //然后设置样式，不设置的话很丑
pieChart.addPlot("default", { //第一个参数指图标的name属性，如果一个，那么就用default
type: PiePlot, //这个参数指饼形图
radius: 200, //
fontColor: "black", //文字颜色
labelOffset: -20 //饼图偏离文字距离（控制饼图大小）
});
pieChart.addSeries("January",chartData); //添加数据，参数1这部分数据的名称，参数2是数据，参数3不清楚
pieChart.render(); //渲染图
});
④其他：比如dojo的设置，加载，略掉。
⑤效果：和上面的效果图都是这样
（61）让div块自适应BorderContainer
①当我们在dojo里面，使用属性：data-dojo-type="dijit/layout/BorderContainer"时，可以实现块和块之间的自适应；
②其中：（注意，都是div块的属性）
外部容器：data-dojo-type = "dijit/layout/BorderContainer"
最底层的容器（被BorderContainer包含）：data-dojo-type = "dijit/layout/ContentPane"
让块和块之间有距离的：data-dojo-props = "gutters:true"
设置为侧边栏：data-dojo-props = "design:'sidebar' "
停靠靠左：data-dojo-props = "region:'left' " 中间用center，上top等，具体有两种情况，请参照⑥中的第《3》条解释
带分离器（大小可拖拽）：data-dojo-props ="splitter:true"
注：data-dojo-props的不同值，可以用逗号分隔放在一起。
③假如一个父容器（用BorderContainer）下的子元素都有（ContentPane），那么这些子元素是可以互相自适应的，但前提是，需要预设其中两个的宽度或高度。具体摆放形式请参照⑥中的《3》
④假如加了分离器属性（值为true），那么相邻块是可以拖拽大小的；
⑤例子：3层，最外层左右，次外层上下，最里层上中下左
（注意，如果需要在本地环境下正常显示，那么加载dojo.js的时候，需要加上绿色字体部分的内容<scriptsrc='dojo/dojo.js' data-dojo-config="async:true"></script>）
<html>
<head>
<meta charset=utf-8"/>
<link href="js/dojo-1.10.5/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet"></link>
<script>var dojoConfig = { parseOnLoad: true }</script>
<script src='dojo/dojo.js'data-dojo-config="async:true"></script>
<script>
require(["dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);
</script>
<style>
body {
padding: 0;
margin: 0;
font-size: 14px;
color: #333;
}
#borderContainer {
width: 100%;
height: 100%;
}
#nav_pane {
width: 200px;
color: #fff;
background: #3e424d;
}
#nav_menu {
font-size: 20px;
}
#main {
background: #f2f2f2;
}
#main_top {
}
</style>
</head>
<body class="claro">
<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true">
<div id="nav_pane" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'left', splitter:true">
最外层左边栏
</div>
<div id="main" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="region:'center'">
<div id="main_top" style="background-color:#aaa;height:100px" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
次外层上面
</div>
<div id="main_center" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar',region:'center'">
<div style="background-color:#888;width:100px" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'left'">
最里层left
</div>
<div style="background-color:#888;height:100px" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
最里层TOP
</div>
<div style="background-color:#ddd" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
最里层center
</div>
<div style="background-color:#aaa;height:100px" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'bottom'">
最里层bottom
</div>
</div>
</div>
</div>
</body>
</html>
⑥一些属性解释：
《1》data-dojo-props="gutters:true" 这个默认值是true，效果是给其所有的子元素加5px的margin。根据测试，当其子元素含有分隔条（就是那个可以拖动然后变换其左右元素的宽度/上下元素的高度的那个玩意），这个值改为false，可能会导致分隔条的一部分染上分隔条的父元素的背景颜色（在引入claro样式的情况下）。
《2》data-dojo-props="liveSplitters:false"默认值为true。当为true时，拖动分隔条，分隔条会实时移动（左右两边的会实时跟着变）；当为false时，拖动分隔条，当鼠标按键松开时，左右两边才会根据被拖动的分隔条当时的状态而变化。
《3》data-dojo-props="design:'sidebar'默认值是headline，值有两种，sidebar和headline。用于描述这个borderContainer的状态，具体看图就懂。
图片引自（请注意实际使用中，应该是小写的）：
https://blogs.esri.com/esri/arcgis/2009/01/21/using-the-dojo-bordercontainer-to-design-application-layouts/
（62）设置事件让BorderContainer再次自适应窗口
插件：dijit/registry
参数：registry
①通过js/jquery修改块的css属性（比如width或height），不会导致块会自动自适应。
因此，需要通过获取父块的id，然后使用 .resize() 来启动自适应。
②方法：
假如父块<div id="abc" data-dojo-type="dijit/layout/BorderContainer">
我们知道其id为abc；
子块若干（这里列一个）：
<div id="m" data-dojo-type=" dijit/layout/ContentPane">
然后women通过jquery修改id="m"的css属性（假如比之前小）：
$("#m").css("width", "100px");
此时，我们会发现被缩小的子块和其他子块之间出现一定空白。但若通过更改浏览器窗口大小，他会再次自适应。当然，这样太麻烦了。
③因此，我们通过父块id获取其 var parent =registry.byId("abc");
注意，获取方式和之前不同。
然后，使用 parent.resize();
我们会发现，其再次自适应了。问题解决
（63）动画的同时，让BorderContainer保持自适应状态
①思路：
<1>在（62）的中，我们是通过修改css，从而使得其从一种布局瞬间变为另一种布局，然后调用resize()使得其自适应的。
<2>但假如我们不是通过css，而是通过动画效果，使得左边页面逐渐变窄，右边页面跟着变宽，我们便不能简单的通过resize()来达成我们的目的了。
<3>原因在于，左边变窄的同时，右边并不会变宽，而我们为了使得最终自适应，必然是在动画结束后调用resize()函数，使其自适应，但也因此导致左边变窄的同时，右边不会跟着变化。（因此左右两边之间会在动画时有一空白处）
<4>解决方案：左边动画的时候，右边也跟着调用动画。假如除左右之外还有切分条（调整左右两边width的），也要对其进行动画处理
②代码比较长
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#borderContainer {
height: 100%;
width: 100%;
}
#leadingPane {
background-color: blue !important;
}
#centrePane {
background-color: pink !important;
}
.tundra .dijitSplitter {
background-color: red;
}
</style>
<script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 300px;" id="leadingPane">
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center" id="centrePane">
<button id="slideLeftButton" type="button" dojoType="dijit.form.Button">向左滑动变窄</button>
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
dojo.addOnLoad(function() {
var bc = dijit.byId("borderContainer");
var leading = dijit.byId("leadingPane");
var centre = dijit.byId("centrePane");
var splitter = bc.getSplitter('left');
dojo.connect(dijit.byId("slideLeftButton"), "onClick", function(){
var leadingWidth = dojo.style(leading.domNode, "width");
var slideSplitter = dojo.fx.slideTo({
node: splitter.id,
duration: 500,
left: (dojo.coords(splitter.domNode).l - 50).toString(),
top: dojo.style(splitter.domNode, "top"),
unit:"px"
});
var slidePane = dojo.animateProperty({
node: leading.domNode,
duration: 500,
properties: {
width: {
end: dojo.style(leading.domNode, "width") - 50
}
}
});
var slideCentre = dojo.animateProperty({
node: centre.domNode,
duration: 500,
properties: {
width: {
end: dojo.style(centre.domNode, "width") + 50
},
left: {
end: dojo.style(centre.domNode, "left") - 50
}
}
});
var anim = dojo.fx.combine([slideSplitter, slidePane, slideCentre]);
dojo.connect(anim, "onEnd", function() {
bc.resize();
});
anim.play();
});
});
</script>
</html>
③变宽原理一样，只需要修改值（加减号颠倒）即可。
④代码解释：
html、css略
js：先获取最外面的容器，然后获取左边部分和右边部分，再通过最外面的获取切分条（splitter）；然后通过动画修改其left属性和width属性；合并动画；执行动画即可。
⑤防止动画连续执行：添加一个事件，点击按钮后隐藏按钮，动画结束后显示按钮即可。
（64）dojo的监视hashchange
插件：dojo/hash, dojo/topic
参数：hash, topic
①解释：hashchange指的是url后面加符号#之后再加字符串（假设为http://ww.baidu.com#abc），当字符串abc改变时（比如变为http://ww.baidu.com#def），触发事件。常用于单页面技术
②原理：
订阅hashchange改变的事件，改变后触发回调函数。
③代码：（同时使用了jquery）
topic.subscribe("/dojo/hashchange",function(hash){ //订阅事件，返回值是hash地址（比如上面的abc）
var id = "iframe_" + hash; //设置iframe的id
var iframe = $("#"+id); //利用jquery，得到该id的标签
if(iframe.length == 0) //如果找不到，则添加该标签
{
$("#iframe_section").append("<iframe id='" + id + "' class='iframe' src='"+hash+".html' />"); //append是jquery的方法，添加子标签
}
$(".iframe").hide(); //隐藏所有class="iframe"的
$("#"+id).show(); //显示指定id的iframe
})
④解释：
《1》首先需要一个触发hashchange的事件（即改变哈希地址的事件）
例如：$("#abc").click(function(){window.location= "#abc"});
其效果是id="abc"的点击后，其哈希地址更改为#abc，于是就能触发上面的事件了。
《2》事件触发后，代码执行到到获取$("#abc")的标签，然后进行if判断；
如果标签不存在，则添加标签（添加到id="iframe_section"的标签下），其为iframe框架，class="iframe"（其通过css来控制样式）id="iframe_abc"（从哈希值得到的，后面需要用），
《3》然后该iframe的地址比如是abc.html（从获取到的hash地址得到的结果），由于没有前缀，因此是相对路径。
《4》可以从《2》看出，有很多个iframe，但我们肯定只想看懂自己想要的那个，因此先隐藏所有的（通过类选择器），然后只显示我们需要的那个（通过id选择器）
《5》于是，我们可以通过改变哈希地址，使得显示我们需要的iframe窗口。当然，也可以用于触发事件，而hash地址是传递给事件的参数（判断哈希地址的值，用一个函数综合管理决定触发哪个事件）；
（65）鼠标点击出现一个弹窗tooltipdialog
插件：dijit/TooltipDialog, dijit/popup
参数：TooltipDialog popup
①效果解释：
点击后，出现这个tooltipdialog，假如鼠标离得远了，那么这个弹框会自动隐藏。
②代码：
var tips = new TooltipDialog({ //新建一个tooltipdialog
id: "tips", //给其一个id
style: "", //可以设置其样式
content:"<h2>消息</h2>", //内容（可以加html标签）
onMouseLeave: function(){ //鼠标离开会关闭该tooltipdialog
popup.close(tips);
}
});
$("#abc").click(function(){ //点击后触发事件
popup.open({ //显示tooltipdialog
popup: tips, //显示哪个（上面定义的tips）
around: dom.byId("abc"), //在点击的附近显示（也可以是别的地方）
orient:["below-alt","above-centered"] //显示位置（这个是左下）
});
});
③更多内容，可以搜dojo tooltipdialog关键词
（66）弹窗dialog
插件：dijit/Dialog
参数：无
样式表：dijit/themes/claro/claro.css
其他：加载dojo前需要<script>vardojoConfig = { parseOnLoad: true }</script>
①效果
弹窗出现后，页面上的东西全部被遮蔽了（变灰，不能点击）；
②要求：
弹窗的html：
<div data-dojo-type="dijit/Dialog" data-dojo-id="ff" title="test"> 测试用，测试用，测试用 </div>
解释：
《1》标签属性第一个用于设置类型是弹窗，第二个用于显示其时使用，第三个是弹窗标题。
《2》除弹窗外，body内至少还有一个<div>块（正常使用不会遇见这个问题）
③示例：（除html代码，自行添加）（这里调用了jquery）
<script src="jquery-1.9.1.min.js"></script>
<script>var dojoConfig = { parseOnLoad: true }</script>
<script src="dojo/dojo.js"></script>
<link href="dijit/themes/claro/claro.css" rel="stylesheet"></link>
<script>
require([ "dijit/Dialog"]);
$(document).ready(function(){
$("#a").click(function(){
ff.show();
});
});
</script>
