5/5更新。BorderContainer自适應在本地時正常使用的方法，請檢視原文代碼之前那一段話
（60）建立一個餅形圖
比較簡單的标簽聲明法：（隻需要修改資料即可）
①首先，加載dojo檔案和樣式檔案：（關于style.css，需要根據自己找到的路徑修改，或者使用我從官網上找到的連結：https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/style.css）
②插件：
③插入的HTML标簽：
注：
<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代碼：
②資料（同上的charData）
③dojo代碼：
④其他：比如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>）
⑥一些屬性解釋：
《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的），也要對其進行動畫處理
②代碼比較長
③變寬原理一樣，隻需要修改值（加減号颠倒）即可。
④代碼解釋：
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）
④解釋：
《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，假如滑鼠離得遠了，那麼這個彈框會自動隐藏。
②代碼：
③更多内容，可以搜dojo tooltipdialog關鍵詞
（66）彈窗dialog
插件：dijit/Dialog
參數：無
樣式表：dijit/themes/claro/claro.css
其他：加載dojo前需要<script>vardojoConfig = { parseOnLoad: true }</script>
①效果
彈窗出現後，頁面上的東西全部被遮蔽了（變灰，不能點選）；
②要求：
彈窗的html：
解釋：
《1》标簽屬性第一個用于設定類型是彈窗，第二個用于顯示其時使用，第三個是彈窗标題。
《2》除彈窗外，body内至少還有一個<div>塊（正常使用不會遇見這個問題）
③示例：（除html代碼，自行添加）（這裡調用了jquery）