Kendo UI开发教程(3): 初始化Data 属性
来源:互联网 发布:淘宝要扫码支付怎么弄 编辑:程序博客网 时间:2024/06/02 13:12
前面在介绍准备Kendo UI开发环境时我们使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件: $(“#datepicker”).kendoDatePicker();
除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化,此时你需要设置data的role属性,然后调用kendo.init方法。
使用初始化Data属性的方法在页面上包含有大量Kendo UI控件时非常便利。 首先, 组件的配置包含在目标元素中,第二无需首先查找每个元素然后调用jQuery方法,你只需调用一次kendo.init()方法。
Kendo UI Mobile应用通常使用Data属性来初始化。
如下例使用data 属性来初始化一个UI组件
1
<div id=
"container"
>
2
<input data-role=
"numerictextbox"
/>
3
</div>
4
<script>
5
kendo.init($(
"#container"
));
6
</script>
其中方法kendo.init($(“#container”)) 会查找所有包含有data-role属性的元素,然后初始化这些Kendo UI组件。 每个kendo UI组件的role的值为该UI组件名称的小写名字,比如”autocomplete”或”dropdownlist”。
缺省情况下,kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件(按这个顺序)。 而Kendo UIMobile应用 首先初始化Kendo UI Mobile组件,然后是Kendo UI Web组件,最后是Kendo UI DataViz组件。 这意味着data-role=”listview” 在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。
比如:在Mobile应用中 指明使用Kendo UI Web的listview
1
<div data-role=
"view"
>
2
<!-- specify the Kendo UI Web ListView widget -->
3
<div data-role=
"kendo.ui.ListView"
></div>
4
</div>
5
<script>
6
var
app =
new
kendo.mobile.Application();
7
</script>
配置
每个组件可以通过Data属性来进行配置,对于配置的属性,只需在属性名前加上data-前缀就可以做为目标元素的属性进行配置。比如 data-delay=”100″。 对于一些使用Camel-cased 的属性则是通过添加“-” ,比如AutoComplete的ignoreCase 的属性可以通过 data-ignore-case来设置。而对于一些已经是使用data前缀的属性则无需再添加data-前缀。比如dataTextField属性可以通过data-text-field属性来配置,dataSource属性可以通过data-source属性来配置。对于一些复杂的配置可以通过JavaScript 对象字面量来配置,比如:data-source=”{data: [{name: 'John Doe'},{name: 'Jane Doe']}”.
如下例:
1
<div id=
"container"
>
2
<input data-role=
"autocomplete"
3
data-ignore-
case
=
"true"
4
data-text-field=
"name"
5
data-source=
"{data: [{name: 'John Doe'},{name: 'Jane Doe'}]}"
6
/>
7
</div>
8
<script>
9
kendo.init($(
"#container"
));
10
11
</script>
事件
你也可以通过data属性添加对Kendo UI组件的事件处理,属性的值被当成一个JavaScript函数,其作用域为全局。
如下例:
1
<div id=
"container"
>
2
<input data-role=
"numerictextbox"
data-change=
"numerictextbox_change"
/>
3
</div>
4
<script>
5
function
numerictextbox_change(e) {
6
// Handle the "change" event
7
}
8
kendo.init($(
"#container"
));
9
</script>
事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为foo 对象的 bar 方法。
例如:
1
<div id=
"container"
>
2
<input data-role=
"numerictextbox"
data-change=
"handler.numerictextbox_change"
/>
3
</div>
4
<script>
5
var
handler = {
6
numerictextbox_change:
function
(e) {
7
// Handle the "change" event
8
}
9
};
10
kendo.init($(
"#container"
));
11
</script>
数据源
支持数据绑定的UI组件的数据源也可以通过data-source 属性来指定。 这个属性可以为一个JavaScript对象,一个数组或是一个全局变量。
例如:
使用JavaScript对象作为数据源.
1
<div id=
"container"
>
2
<input data-role=
"autocomplete"
data-source=
"{data:['One', 'Two']}"
/>
3
</div>
4
<script>
5
kendo.init($(
"#container"
));
6
</script>
使用JavaScript数组作为数据源。
1
<div id=
"container"
>
2
<input data-role=
"autocomplete"
data-source=
"['One', 'Two']"
/>
3
</div>
4
<script>
5
kendo.init($(
"#container"
));
6
</script>
使用一个可以全局访问的变量作为数据源。
1
<div id=
"container"
>
2
<input data-role=
"autocomplete"
data-source=
"dataSource"
/>
3
</div>
4
<script>
5
var
dataSource =
new
kendo.data.DataSource( {
6
data: [
"One"
,
"Two"
]
7
});
8
kendo.init($(
"#container"
));
9
</script>
模板
模板也可以通过Data属性来设置,属性的值代表用来定义模板的Script元素的Id。比如:1
<div id=
"container"
>
2
<input data-role=
"autocomplete"
3
data-source=
"[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"
4
data-text-field=
"firstName"
5
data-template=
"template"
/>
6
</div>
7
<script id=
"template"
type=
"text/x-kendo-template"
>
8
<span>
#: firstName # #: lastName #</span>
9
</script>
10
<script>
11
kendo.init($(
"#container"
));
- Kendo UI开发教程:初始化Data属性
- Kendo UI开发教程(3): 初始化Data 属性
- Kendo UI开发教程(3): 初始化Data 属性
- Kendo UI开发教程:Kendo DataSource概述
- Kendo UI开发教程(2):准备Kendo UI开发环境
- Kendo UI开发教程(2):准备Kendo UI开发环境
- Kendo UI开发教程(2):准备Kendo UI开发环境
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程: Kendo UI 示例及总结
- Kendo UI开发教程: Kendo UI 示例及总结
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程: Kendo UI 示例及总结
- Kendo UI开发教程:Kendo UI模板概述
- Kendo UI开发教程:UI Widgets概述
- Kendo UI开发教程(2):准备Kendo UI开发环境
- 55-最小公倍数
- 学生管理系统
- <office>office的一二个使用经验
- 互联网产品开发乱象
- Kendo UI开发教程(3): 初始化Data 属性
- 文件管理
- 插入排序c++实现
- DBLP数据集简介及简单用法
- Kendo UI开发教程(4): UI Widgets 概述
- 多屏互动---DLNA-Miracast
- CI 框架(Apache环境)有效删除URL中的index.php
- 使用SQL Server发送邮件时遇到的诡异事件
- WWDC2012:Objective-C的新特性