UI Widgets 概述

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

使用 jQuery 初始化 Kendo UI 組件

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

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

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

其中 $(“#autocomplete”).kendoAutoComplete([“Apples”, “Oranges”, “Grapes”]); 完成兩項(xiàng)任務(wù)：

查找 Id 為 autocomplete 的 HTML 元素，#autocomplete 為 CSS 選擇器使用 kendoAutoComplete jQuery 插件初始化 Kendo UI 組件，并使用數(shù)組[“Apples”, “Oranges”, “Grapes”]作為配置參數(shù)傳給 kendoAutoComplete 組件注意：如果 jQuery 找不到由 css 選擇器指定的 HTML 元素，Kendo UI 組件不會被創(chuàng)建，你可以使用任意合法的 CSS 選擇器來初始化 Kendo UI 組件，對于每個(gè)符合選擇器條件的HTML元素都會初始化一個(gè) Kendo UI 組件。

配置 Kendo UI 組件

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

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

<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 文檔 包含了每個(gè) Kendo UI 組件支持的配置項(xiàng)。

獲取 Kendo UI 組件的引用對象

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

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

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

使用 Kendo UI 組件的方法

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

<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 對象之后，調(diào)用了它的 value()方法來寫入和讀取該輸入框的內(nèi)容。

監(jiān)聽 Kendo UI 事件

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

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

下面例子，使用 bind 方法。

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

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

事件處理函數(shù)

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

<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 關(guān)鍵字來獲取觸發(fā)事件的 UI 對象引用，比如：

<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>