Kendo UI开发教程:UI Widgets概述

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

概述: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 的部件和内置组件,构建本机移动应用绰绰有余


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
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