Kendo UI开发教程：UI Widgets概述

Kendo UI 是基于jQuery 库开发的，Kendo UI widgets是以jQuery 插件形式提供的，这些插件的名称基本上都是以kendo作为前缀。

Kendo UI 是基于jQuery 库开发的，Kendo UI widgets是以jQuery 插件形式提供的。这些插件的名称基本上都是以kendo作为前缀。比如 Kendo的autocomplete UI 组件名称为 kendoAutoComplete ,Kendo UI 手机 UI组件是以 “kendoMobile前缀。比如：endoMobileListView

使用jQuery初始化Kendo UI组件

Kendo UI组件使用页面上HTML元素来创建，使用CSS选择器 然后调用jquery插件（kendo UI组件）将这些HTML元素转换为Kendo UI组件（基本方法和jQuery UI类似）。

例如：初始化一个自动提示输入框组件（autocomplete)

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

其中 $(autocomplete.kendoAutoComplete([pples ranges rapes); 完成两项任务：

1. 查找Id为autocomplete的HTML元素，#autocomplete 为CSS 选择器
2. 使用kendoAutoComplete jQuery插件初始化 Kendo UI组件，并使用数组[pples ranges rapes作为配置参数传给kendoAutoComplete组件

注意：如果jQuery 找不到由css 选择器指定的HTML元素，Kendo UI组件不会被创建，你可以使用任意合法的CSS选择器来初始化Kendo UI组件，对于每个符合选择器条件的HTML元素都会初始化一个Kendo UI组件。

配置Kendo UI组件

如前面例子，可以通过传递配置对象的方法来配置Kendo UI组件，配置对象为一组Key/Value对，这些Key/Value值用来配置UI组件。

如下例，配置一个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 文档 包含了每个Kendo UI 组件支持的配置项。