Kendo UI開發教程：UI Widgets概述

Kendo UI 是基於jQuery 庫開發的，Kendo UI widgets是以jQuery 插件形式提供的。這些插件的名稱基本上都是以kendo做爲前綴。好比 Kendo的autocomplete UI 組件名稱爲 kendoAutoComplete ,Kendo UI 手機 UI組件是以 「kendoMobile?爲前綴。好比：?kendoMobileListView?.

使用jQuery初始化Kendo UI組件

Kendo UI組件使用頁面上HTML元素來建立，使用CSS選擇器 而後調用jquery插件（kendo UI組件）將這些HTML元素轉換爲Kendo UI組件（基本方法和jQuery UI相似）。

例如：初始化一個自動提示輸入框組件（autocomplete)

1 2 3 4

<input id="「autocomplete」"> <script> $(「#autocomplete」).kendoAutoComplete([「Apples」, 「Oranges」, 「Grapes」]); </script>

其中 $(?#autocomplete?).kendoAutoComplete([?Apples?, ?Oranges?, ?Grapes?]); 完成兩項任務：

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

注意：若是jQuery 找不到由css 選擇器指定的HTML元素，Kendo UI組件不會被建立，你能夠使用任意合法的CSS選擇器來初始化Kendo UI組件，對於每一個符合選擇器條件的HTML元素都會初始化一個Kendo UI組件。

配置Kendo UI組件

如前面例子，能夠經過傳遞配置對象的方法來配置Kendo UI組件，配置對象爲一組Key/Value對，這些Key/Value值用來配置UI組件。

以下例，配置一個Grid組件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<div id="「grid」"></div> <script> $(「#grid」).kendoGrid({ height: 200, columns:[ { field: 「FirstName」, title: 「First Name」 }, { field: 「LastName」, title: 「Last Name」 } ], dataSource: { data: [ { FirstName: 「John」, LastName: 「Doe」 }, { FirstName: 「Jane」, LastName: 「Doe」 } ] } }); </script>

上面例子爲Grid組件配置了height, columns和dataSource. API 文檔 包含了每一個Kendo UI 組件支持的配置項。

獲取Kendo UI組件的引用對象

Kendo UI 經過jQuery 插件的方式來初始化，可是調用這些方法時不會返回這些實例對象的引用，而是使用傳統的jQuery 方法來獲取所建立的Kendo UI對象的引用，爲了得到所建立的Kendo UI組件對象的引用，使用jQuery data方法，例如獲取前面例子中建立kendoAutoComplete的對象，能夠使用下面代碼：

1 2 3 4 5

<input id="「autocomplete」"> <script> $(「#autocomplete」).kendoAutoComplete([「Apples」, 「Oranges」, 「Grapes」]); var autocomplete = $(「#autocomplete」).data(「kendoAutoComplete」); </script>

方法 $(?#autocomplete?).data(?kendoAutoComplete?) 返回所建立的Kendo AutoComplete對象。data的參數爲Kendo UI組件的名稱，好比?kendoAutoComplete?, ?kendoGrid?等。

使用Kendo UI組件的方法

在獲取Kendo UI組件對象的引用以後，就能夠調用該UI組件的方法，例如：

1 2 3 4 5 6 7 8

<input id="「autocomplete」"> <script> $(「#autocomplete」).kendoAutoComplete([「Apples」, 「Oranges」, 「Grapes」]); var autocomplete = $(「#autocomplete」).data(「kendoAutoComplete」); autocomplete.value(「Cherries」); var value = autocomplete.value(); alert(value); // Displays 「Cherries」 </script>

上面的例子中獲取autocompete對象以後，調用了它的value()方法來寫入和讀取該輸入框的內容。

監聽Kendo UI事件

Kendo UI組件支持多種事件，好比按鍵，鼠標，內容變化等事件，有兩種方法能夠爲Kendo Ui 組件定義事件處理方法：

1. 在初始化時定義JavaScript函數做爲該UI組件的事件處理方法
2. 經過bind函數來把一個JavaScript函數綁定到UI組件的某個事件

好比，初始化時定義事件處理方法：

1 2 3 4 5 6 7 8 9

<input id="「autocomplete」"> <script> function autocomplete_change() { // Handle the 「change」 event } $(「#autocomplete」).kendoAutoComplete({ change: autocomplete_change }); </script>

下面例子，使用bind方法。

1 2 3 4 5 6 7 8 9

<input id="「autocomplete」"> <script> function autocomplete_change() { // Handle the 「change」 event } $(「#autocomplete」).kendoAutoComplete(); var autocomplete = $(「#autocomplete」).data(「kendoAutoComplete」); autocomplete.bind(「change」, autocomplete_change); </script>

兩種方法都把一個函數綁定到autocomplete的?change?事件。此時若是autocomplete內容發生變化，則觸發change事件，相應的事件處理方法會被調用。

事件處理函數

事件處理函數在事件發生時被調用，該事件處理函數的傳入參數包含了事件相關的JavaScript對象，你能夠經過sender參數得到觸發該事件的UI組件，好比：

1 2 3 4 5 6 7 8 9 10 11

<input id="「autocomplete」"> <script> function autocomplete_change(e) { var autocomplete = e.sender; var value = autocomplete.value(); alert(value); // Displays the value of the AutoComplete widget } $(「#autocomplete」).kendoAutoComplete({ change: autocomplete_change }); </script>

此外，也能夠使用this 關鍵字來獲取觸發事件的UI對象引用，好比：

1 2 3 4 5 6 7 8 9 10 11

<input id="「autocomplete」"> <script> function autocomplete_change(e) { var autocomplete = this; var value = autocomplete.value(); alert(value); // Displays the value of the AutoComplete widget } $(「#autocomplete」).kendoAutoComplete({ change: autocomplete_change }); </script>

本文轉載自Kendo UI中文網