ags js api學習之dojo初步
說明:(1)dijit是dojo中介面控制元件的總稱,每個Dijit控制元件都是由Dojo類以及控制元件中使用的圖片,CSS等資原始檔共同組成;
(2)dojo裡面包含核心類dojo.js
2、新建HTML文件,引用dojo.js檔案和CSS檔案,分兩種方式:
(1)線上引用
(2)本地引用:將解壓後文件部署到伺服器目錄,然後本地引用
<link rel="stylesheet"href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
<scriptsrc="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dojo/dojo.js"data-dojo-config="asyc:true,
注意:1)asyc選項用來通知AMD Loader使用新的、快速的方法載入javascript模組
2)idDebug設定為true可以方便開發時獲得適當的警告資訊
3)parseOnload已經被淘汰,不建議使用
3、使用(以dijit為例)
在dojo中建立dijit分兩種方式:
(1)通過HTML標記以宣告方式建立
(2)通過javascript程式碼動態建立
以第一種方法為例:
// 宣告HTML按鈕
<button id=”btn1” type=”button” name=”btnName1”>testBtn </button>
// 宣告dijit按鈕
<button id=”btn2” data-dojo-type=”dijit.form.Button”name=”btnName2”> testBtn2</button>
說明:1)二者區別在於type屬性變化
2)dijit.form.Button是dojo中預定義模組,具體類如Button是大寫
3)老版本(v1.7之前?)定義為datatype,新版本定義為data-dojo-type(為相容HTML5),推薦使用新版本
4、訪問dijit控制元件及其屬性
(1)想要獲取一個特定的dom節點,老方法是通過document.getElementsById(..),dijit中提供了更為簡潔的方法,即dijit.byId(id),來獲取相應控制元件的引用。另外,如果建立Dijit控制元件時使用的Dom節點有id屬性,那麼這個id就是Dijit控制元件的id;如果Dom節點沒有指定id,那麼將會自動為Dijit控制元件產生一個唯一id。
Var cuBtn = dijit.byId(‘btn2’);
(2)獲取dijit控制元件的某個屬性,例如
Var btnName = dijit.byId(‘btn2’).attr(‘name’);
(3)設定dijit控制元件的某個屬性,例如
Dijit.byId(‘btn2’).attr(‘name’,”hehe”);
5、dojo引入模組
dojo中的模組都是可以單獨載入、相互獨立的部分,通過類似檔案路徑的字串來標識模組。例如,在Dojo1.7或更高版本中,my/module/id 是一個模組的識別符號(MID)。實際上,這些模組識別符號(MID)會直接印射到JavaScript檔案,也就是說,my/module/id,將會讓Dojo載入器來載入 my/module/id.js 檔案中定義的模組。
為了在應用程式中使用和定義模組,Dojo載入器(dojo.js)中定義了兩個全域性函式:require()——用於載入一個或多個模組,以及 define() ——用於定義一個模組。這兩個函式通常需要兩個引數:一個MID列表來指定必須載入的模組,以及一個回撥函式。
6、dojo事件繫結
使用dojo的connect方法來實現事件的繫結,例如
Dojo.connect(dijit.byId(‘btn2’),’onclick’,clickFunc);
7、豐富的dijit控制元件集
- 上下文選單,彈出選單,按鈕式選單
- 改進的基本表單元素:按鈕,下拉框,複選款,單選按鈕,文字框,等等。
- 日期和時間選擇控制元件
- 所見即所得富文字編輯器
- 水平和垂直滑動塊
- 進度條
- 選項卡、手風琴控制元件
- 支援拖放功能的樹結構
- 對話方塊,提示框
- 支援調整大小的佈局控制元件
控制元件擴充套件:如果在基本的dijit庫中沒有你需要的控制元件,dojox(dojo擴充套件)是另外一個提供Dijit控制元件的地方,其中有更大量的控制元件可供選擇
8、學習資源