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中文网