Kendo UI 初始化 Data 属性
初始化 Data 属性
前面在介绍准备 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 组件
<div id="container">
<input data-role="numerictextbox" />
</div>
<script>
kendo.init($("#container"));
</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
<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’]}”.
如下例:
<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>
事件
你也可以通过 data 属性添加对 Kendo UI 组件的事件处理,属性的值被当成一个 JavaScript 函数,其作用域为全局。
如下例:
<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 方法。
例如:
<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 数组作为数据源。
<div id="container">
<input data-role="autocomplete" data-source="{data:['One', 'Two']}" />
</div>
<script>
kendo.init($("#container"));
</script>
使用 JavaScript 数组作为数据源。
<div id="container">
<input data-role="autocomplete" data-source="['One', 'Two']" />
</div>
<script>
kendo.init($("#container"));
</script>
使用一个可以全局访问的变数作为数据源。
<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。比如:
<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 初始化 Data 属性的更多相关文章
- [置顶] Kendo UI开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
- Kendo UI for jQuery使用教程:使用MVVM初始化(二)
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:使用MVVM初始化(一)
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:初始化jQuery插件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
- Kendo UI 使用小知识点汇总
本攻略适用于了解的kendo UI 的基本语法的人使用.如果还不了解Kendo UI的基本语法,请大力观摹Demo ,并自己动用写几个控件. 1.获取Kendo UI的控件实体,不必存成全局变量. ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Kendo UI Grid 使用总结
Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...
- HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...
随机推荐
- 百度地图API的第一次接触——热区
1.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- python2和python3中的range区别
python2中的range返回的是一个列表 python3中的range返回的是一个迭代值 for i in range(1,10)在python2和python3中都可以使用,但是要生成1-10的 ...
- docker添加阿里云镜像加速器
.docker添加阿里云镜像加速器 https://blog.csdn.net/chenjin_chenjin/article/details/86674521 .配置阿里云加速器 阿里云会根据账号生 ...
- 条款20.宁以pass-by-reference-to-const替换pass-by-vlaue
缺省情况下c++以by value的方式传递对象至(或来自)函数.除非你另外指定,否则函数参数都是以实际实参的复件(副本)为初值,而调用端所获得的亦是函数返回值的一个复件.这些复件是由对象的c ...
- iOS内购流程一(协议、税务和银行业务)
协议.税务和银行业务,这一选项是当你App使用了In-app purchaes时候,你跟苹果签订协议的,需要签订合同和填写你的银行收款等信息 一.填写法人信息 1.登录iTunes Store,点击协 ...
- 60行代码实现一个迷你版Vue Router
这是一个超级精简版的VueRouter,实现hash模式下,hash改变组件切换的功能,原理就是利用了 Vue.js 的响应式机制触发router-view组件的重新渲染. 代码 https://gi ...
- ubuntu18.04安装配置opencv3.4.0
1.安装配置相关工具及依赖库 sudo apt-get install build-essential # 必须的,gcc编译环境 sudo apt-get install cmake git lib ...
- unity2017分离动作
http://tsubakit1.hateblo.jp/entry/2015/06/01/235939 using UnityEngine; using UnityEditor; using Syst ...
- 动画重定向技术分析和Unity中的应用
http://www.jianshu.com/p/6e9ba1b9c99e 因为一些手游项目需要使用Unity引擎,但在动画部分需要使用重定向技术来实现动画复用,考虑到有些项目开发人员没有过这方面的经 ...
- Mac 下sublime的插件
最近更换了本本,入了港行的Mac pro,来替代原来的Thinkpad,在windows上工作做完之后,搭建了一下开发环境,eclipse是必须的,但是luna没有html editor,然后就在 e ...