Kendo UI Widgets 概述

UI Widgets 概述

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

使用 jQuery 初始化 Kendo UI 組件

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

例如：初始化一個(gè)自動(dòng)提示輸入框組件（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 組件不會(huì)被創(chuàng)建，你可以使用任意合法的 CSS 選擇器來(lái)初始化 Kendo UI 組件，對(duì)于每個(gè)符合選擇器條件的HTML元素都會(huì)初始化一個(gè) Kendo UI 組件。

配置 Kendo UI 組件

如前面例子，可以通過(guò)傳遞配置對(duì)象的方法來(lái)配置 Kendo UI 組件，配置對(duì)象為一組 Key/Value 對(duì)，這些 Key/Value 值用來(lái)配置 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 組件的引用對(duì)象

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

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

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

使用 Kendo UI 組件的方法

在獲取 Kendo UI 組件對(duì)象的引用之后，就可以調(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 對(duì)象之后，調(diào)用了它的 value()方法來(lái)寫入和讀取該輸入框的內(nèi)容。

監(jiān)聽(tīng) 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)的事件處理方法會(huì)被調(diào)用。

事件處理函數(shù)

事件處理函數(shù)在事件發(fā)生時(shí)被調(diào)用，該事件處理函數(shù)的傳入?yún)?shù)包含了事件相關(guān)的 JavaScript 對(duì)象，你可以通過(guò) 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)鍵字來(lái)獲取觸發(fā)事件的 UI 對(duì)象引用，比如：

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