Kendo UI开发教程:UI Widgets概述

原创|使用教程|编辑:龚雪|2016-10-10 09:21:08.000|阅读 296 次

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

相关链接:

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)

<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组件。

<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组件的引用对象

Kendo UI 通过jQuery 插件的方式来初始化,但是调用这些方法时不会返回这些实例对象的引用,而是使用传统的jQuery 方法来获取所创建的Kendo UI对象的引用,为了获得所创建的Kendo UI组件对象的引用,使用jQuery data方法,例如获取前面例子中创建kendoAutoComplete的对象,可以使用下面代码:

<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组件的方法,例如:

<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组件的某个事件

比如,初始化时定义事件处理方法:

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

两种方法都把一个函数绑定到autocomplete的?change?事件。此时如果autocomplete内容发生变化,则触发change事件,相应的事件处理方法会被调用。

事件处理函数

事件处理函数在事件发生时被调用,该事件处理函数的传入参数包含了事件相关的JavaScript对象,你可以通过sender参数获得触发该事件的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 关键字来获取触发事件的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>
本文转载自Kendo UI中文网
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:JavaScript HTML5jQueryUI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-10-10 09:23:18.000
0

个人比较看好这个移动框架,它里面有容易上手的基于 jQuery 的部件和内置组件,构建本机移动应用绰绰有余


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat