KendoUI 是基于jQuery 庫開發(fā)的，Kendo UI widgets是以jQuery 插件形式提供的。這些插件的名稱基本上都是以kendo作為前綴。比如 Kendo的autocomplete UI 組件名稱為 kendoAutoComplete ,Kendo UI 手機(jī) UI組件是以“kendoMobile為前綴。比如：kendoMobileListView

使用jQuery初始化Kendo UI組件

KendoUI組件使用頁面上HTML元素來創(chuàng)建，使用CSS選擇器 然后調(diào)用jquery插件（kendo UI組件）將這些HTML元素轉(zhuǎn)換為Kendo UI組件（基本方法和jQuery UI類似）。

例如：初始化一個(gè)自動(dòng)提示輸入框組件（autocomplete) 其中 $(?#autocomplete?).kendoAutoComplete([?Apples?, ?Oranges?,?Grapes?]); 完成兩項(xiàng)任務(wù)：

 

1. 查找Id為autocomplete的HTML元素，#autocomplete     為CSS 選擇器
2. 使用kendoAutoComplete     jQuery插件初始化 Kendo UI組件，并使用數(shù)組[?Apples?, ?Oranges?, ?Grapes?]作為配置參數(shù)傳給kendoAutoComplete組件

?

注意：如果jQuery 找不到由css 選擇器指定的HTML元素，Kendo UI組件不會(huì)被創(chuàng)建，你可以使用任意合法的CSS選擇器來初始化Kendo UI組件，對(duì)于每個(gè)符合選擇器條件的HTML元素都會(huì)初始化一個(gè)Kendo UI組件。

 

配置Kendo UI組件

如前面例子，可以通過傳遞配置對(duì)象的方法來配置Kendo UI組件，配置對(duì)象為一組Key/Value對(duì)，這些Key/Value值用來配置UI組件。

如下例，配置一個(gè)Grid組件。

 

 

上面例子為Grid組件配置了height, columns和dataSource. API 文檔 包含了每個(gè)Kendo UI 組件支持的配置項(xiàng)。

 

獲取Kendo UI組件的引用對(duì)象

Kendo UI 通過jQuery 插件的方式來初始化，但是調(diào)用這些方法時(shí)不會(huì)返回這些實(shí)例對(duì)象的引用，而是使用傳統(tǒng)的jQuery 方法來獲取所創(chuàng)建的Kendo UI對(duì)象的引用，為了獲得所創(chuàng)建的Kendo UI組件對(duì)象的引用，使用jQuery data方法，例如獲取前面例子中創(chuàng)建kendoAutoComplete的對(duì)象，可以使用下面代碼：

方法 $(?#autocomplete?).data(?kendoAutoComplete?) 返回所創(chuàng)建的Kendo AutoComplete對(duì)象。data的參數(shù)為Kendo UI組件的名稱，比如?kendoAutoComplete?, ?kendoGrid?等。

 

使用Kendo UI組件的方法

在獲取Kendo UI組件對(duì)象的引用之后，就可以調(diào)用該UI組件的方法，例如：

上面的例子中獲取autocompete對(duì)象之后，調(diào)用了它的value()方法來寫入和讀取該輸入框的內(nèi)容。

 

監(jiān)聽Kendo UI事件

Kendo UI組件支持多種事件，比如按鍵，鼠標(biāo)，內(nèi)容變化等事件，有兩種方法可以為Kendo Ui 組件定義事件處理方法：

1. 在初始化時(shí)定義JavaScript函數(shù)作為該UI組件的事件處理方法
2. 通過bind函數(shù)來把一個(gè)JavaScript函數(shù)綁定到UI組件的某個(gè)事件

?

比如，初始化時(shí)定義事件處理方法：

下面例子，使用bind方法。

兩種方法都把一個(gè)函數(shù)綁定到autocomplete的?change?事件。此時(shí)如果autocomplete內(nèi)容發(fā)生變化，則觸發(fā)change事件，相應(yīng)的事件處理方法會(huì)被調(diào)用。

 

事件處理函數(shù)

事件處理函數(shù)在事件發(fā)生時(shí)被調(diào)用，該事件處理函數(shù)的傳入?yún)?shù)包含了事件相關(guān)的JavaScript對(duì)象，你可以通過sender參數(shù)獲得觸發(fā)該事件的UI組件，比如：

此外，也可以使用this 關(guān)鍵字來獲取觸發(fā)事件的UI對(duì)象引用，比如：