文档章节

Kendo UI开发教程:初始化Data属性

Miss_Hello_World
 Miss_Hello_World
发布于 2016/09/30 10:08
字数 1035
阅读 20
收藏 0

前面在介绍准备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

2

3

4

5

6

<div id="“container”">

<input data-role="“numerictextbox”">

</div>

<script>

kendo.init($(“#container”));

</script>

>Kendo UI开发教程

其中方法kendo.init($(?#container?)) 会查找所有包含有data-role属性的元素,然后初始化这些Kendo UI组件。 每个kendo UI组件的role的值为该UI组件名称的小写名字,比如?autocomplete?或?dropdownlist?。

缺省情况下,kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件(按这个顺序)。 而Kendo UI Mobile应用 首先初始化Kendo UI Mobile组件,然后是Kendo UI Web组件,最后是Kendo UI DataViz组件。 这意味着data-role=?listview? 在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。

比如:在Mobile应用中 指明使用Kendo UI Web的listview:

1

2

3

4

5

6

7

<div data-role="“view”">

<!--– specify the Kendo UI Web ListView widget –-->

<div data-role="“kendo.ui.ListView”"></div>

</div>

<script>

var app = new kendo.mobile.Application();

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

2

3

4

5

6

7

<div id="“container”">

<input data-role="“autocomplete”" data-ignore-case="“true”" data-text-field="“name”" data-source="“{data:" [{name:="" john="" doe’},{name:="" jane="" doe’}]}”="">

</div>

<script>

kendo.init($(“#container”));

 

</script>

>Kendo UI开发教程

事件

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

如下例:

1

2

3

4

5

6

7

8

9

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

事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为foo 对象的 bar 方法。例如:

1

2

3

4

5

6

7

8

9

10

11

<div id="“container”">

<input data-role="“numerictextbox”" data-change="“handler.numerictextbox_change”">

</div>

<script>

var handler = {

numerictextbox_change: function (e) {

// Handle the “change” event

}

};

kendo.init($(“#container”));

</script>

数据源

支持数据绑定的UI组件的数据源也可以通过data-source 属性来指定。 这个属性可以为一个JavaScript对象,一个数组或是一个全局变量。

例如:使用JavaScript对象作为数据源。

1

2

3

4

5

6

<div id="“container”">

<input data-role="“autocomplete”" data-source="“{data:[‘One’," ‘two’]}”="">

</div>

<script>

kendo.init($(“#container”));

</script>

使用JavaScript数组作为数据源。

1

2

3

4

5

6

<div id="“container”">

<input data-role="“autocomplete”" data-source="“[‘One’," ‘two’]”="">

</div>

<script>

kendo.init($(“#container”));

</script>

使用一个可以全局访问的变量作为数据源。

1

2

3

4

5

6

7

8

9

<div id="“container”">

<input data-role="“autocomplete”" data-source="“dataSource”">

</div>

<script>

var dataSource = new kendo.data.DataSource( {

data: [ “One”, “Two” ]

});

kendo.init($(“#container”));

</script>

模板

模板也可以通过Data属性来设置,属性的值代表用来定义模板的Script元素的Id。比如:

1

2

3

4

5

6

7

8

9

<div id="“container”">

<input data-role="autocomplete" data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]" data-text-field="firstName" data-template="template">

</div>

<script id="template" type="text/x-kendo-template">

<span>#: firstName # #: lastName #</span>

</script>

<script>

kendo.init($("#container"));

</script>

本文转载自Kendo UI中文网

本文转载自:

Miss_Hello_World
粉丝 22
博文 668
码字总数 404202
作品 0
九龙坡
私信 提问
Kendo UI开发教程:UI Widgets概述

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

Miss_Hello_World
2016/10/10
31
0
最完整UI库Kendo UI发布R3 2018|附下载

通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50%...

Miss_Hello_World
2018/10/09
87
0
Kendo UI常用示例汇总(三)

<Kendo UI Professional试用版下载> Kendo UI Professional 提供开源和商业两个版本。开源版 Kendo UI Core,有40+个框架和组件;商业版整合了之前的Kendo UI Web、Kendo UI Mobile 和 Kend...

Miss_Hello_World
2016/03/29
40
0
UI组件Kendo UI发布R2 2018|附下载

通过70多个可自定义的UI组件,Kendo UI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容性和即时使用的主题,Kendo UI将开发时间加快了50%...

Miss_Hello_World
2018/07/17
49
0
【更新】Kendo UI for jQuery发布R2 2018|附下载

Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。从70多个UI中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。 更多资源请查看...

Miss_Hello_World
2018/07/24
18
0

没有更多内容

加载失败,请刷新页面

加载更多

vue vue-router beforeRouteEnter

本文转载于:专业的前端网站➬vue vue-router beforeRouteEnter beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `thi...

前端老手
53分钟前
4
0
Spring Boot 2 实战:结合 Docker 容器化

1. 前言 Docker 是啥?好处是啥? 什么现在如果作为一名开发你还不知道甚至没有用过我都感觉你落伍了。Docker 是一种虚拟化的容器技术,目的为了打造持续集成、版本控制、可移植性、隔离性和...

码农小胖哥
57分钟前
4
0
Linux 常用查询句柄的命令(Too many open files)

摘要 查询命令 进程占用的句柄总数 lsof -n | wc -l 查看哪一个进程占用的句柄最多 lsof -n|awk '{print $2}'|sort|uniq -c|sort -nr|more 第一列 是 占用句柄数; 第二列 是 进程号 PID;...

liangxiao
57分钟前
5
0
JavaScript权威指南笔记5

第五章、语句 0、概述 JS程序是一系列可执行语句的集合。 通过控制语句来改变语句的默认执行顺序。 控制语句:条件、循环和跳转(如return、break和throw) 2、复合语句 当多条语句被当做一条语...

_Somuns
今天
5
0
vmware安装ubuntu18.04总是 panic -not syncing:corrupted stack end detected inside schedule

Vmware 安装ubuntu 总是卡着不动, 提示panic -not synciong 网上提示很多办法,都试了效果不佳, 找到了完美解决办法 你的兼容模式重新选一下为6.0,兼容性对硬件有要求的 即可实现 成功安装...

dragon_tech
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部