Kendo 学习笔记

最新推荐文章于 2023-02-08 09:44:04 发布

chelen_jak

最新推荐文章于 2023-02-08 09:44:04 发布

阅读量1.3k

点赞数

分类专栏：基础知识 HTML5 Kendo

本文链接：https://blog.csdn.net/chelen_jak/article/details/17502585

版权

基础知识同时被 3 个专栏收录

160 篇文章 0 订阅

订阅专栏

HTML5

155 篇文章 0 订阅

订阅专栏

Kendo

71 篇文章 2 订阅

订阅专栏

1.使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件

方法： $(“#datepicker”).kendoDatePicker();

<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function () {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>

另外，除了使用jQuery插件的方法来初始化方法外，每个Kendo 控件还可以通过data属性来初始化，此时你需要设置data的role属性，然后调用kendo.init方法。
<div id="container">
<input data-role="numerictextbox" />
</div>
<script>
kendo.init($("#container"));
</script>

2、事件

你也可以通过data属性添加对Kendo UI组件的事件处理，属性的值被当成一个JavaScript函数，其作用域为全局。

</script>
<div id="container">
<input data-role="numerictextbox" data-change="numerictextbox_change" />
</div>

<script>
function numerictextbox_change(e) {
// Handle the "change" event
}
kendo.init($("#container"));
</script>

3、获取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组件实例访问方式(Kendo Tip: Accessing Widget Instances)

4、监听Kendo UI事件（事件綁定）

在初始化时定义JavaScript函数作为该UI组件的事件处理方法:
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete({
change: autocomplete_change
});
</script>

通过bind函数来把一个JavaScript函数绑定到UI组件的某个事件:
<input id="autocomplete" />
<script>
function autocomplete_change() {
// Handle the "change" event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>