1. 程式人生 > >ags js api學習之dojo初步

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,

parseOnLoad: true,idDebug:true"></script>

注意: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、學習資源