Kendo UI for jQuery使用教程:初始化jQuery插件
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
所有Kendo UI小部件都注册为jQuery插件,允许它们在jQuery对象实例上实例化。
jQuery插件方法由Pascal Case中的小部件名称构成,该名称以kendoGrid和kendoListView为前缀。 为了避免与桌面对应物发生冲突,混合UI小部件的方法以kendoMobileTabStrip,kendoMobileButton和kendoMobileListView为前缀。一些Kendo UI小部件对它们实例化的元素类型有特定要求。
注意:
- 避免从同一DOM元素初始化几个不同的Kendo UI小部件,因为重复初始化可能会导致不希望的副作用。
- 强烈建议从作为DOM树一部分的HTML元素初始化Kendo UI小部件。 从文档片段创建小部件可能会导致意外的副作用或导致JavaScript错误。
入门
以下示例演示如何使用常规方法实例化Kendo UI AutoComplete。 类似于演示的方法用于所有其他小部件,其小部件名称拼写在Pascal Case中。 窗口小部件初始化方法遵循jQuery插件范例,并返回用于创建窗口小部件的相同DOM元素的jQuery对象。 它不返回小部件实例,并且必须通过jQuery data()方法获取实例。
注意:如果jQuery对象包含多个DOM元素,则为每个元素实例化一个单独的窗口小部件。
<p>Animal: <input id="animal" /></p>
<script>
$(function() {
$("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] });
});
</script>
具有单选择器的多个小部件
以下示例演示如何使用单个jQuery选择器实例化多个按钮, 从大多数方法返回所选DOM元素的jQuery约定适用于窗口小部件的初始化方法,这允许链接jQuery方法。
链接jQuery方法调用
以下示例演示了widget实例化插件方法之后的链式jQuery方法调用。
<button>Foo</button> | <button>Bar</button>
<script>
$(function() {
$("button").kendoButton().css("color", "red");
});
</script>
Iframes中的小部件
从理论上讲,可以从父页面的上下文初始化一个位于iframe内的Kendo UI小部件,反之亦然。 此类跨框架窗口小部件创建可能在特定方案中有效,但未得到官方支持或推荐。 例如,呈现弹出窗口的窗口小部件可能无法显示它们。 要解决此问题,请通过调用JavaScript函数来初始化其他文档上下文中的窗口小部件,该函数属于窗口小部件所在的上下文。
重复初始化
初始化窗口小部件时,目标是获取实例对象。 但是,重新创建窗口小部件实例是一个常见问题。 当使用Kendo UI服务器端包装器(因为服务器端包装器被自动初始化)或者在多次执行的事件处理程序中创建窗口小部件时,可以在同一DOM元素上重复初始化窗口小部件。
以下示例演示了不正确的重复初始化。
<input id="autocomplete" /><script>// initialization code here...$("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);
// ...
// correct - instance reference is obtained:
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
// INCORRECT - instance reference is obtained while creating a duplicate instance:
var duplicate = $("#autocomplete").kendoAutoComplete().data("kendoAutoComplete");
</script>
要检查某个DOM元素的窗口小部件实例是否已存在,请使用标准方法获取窗口小部件实例。 如果返回的值未定义,则窗口小部件实例不存在。
<input id="autocomplete" /><script>// try to obtain the widget instancevar autocomplete = $("#autocomplete").data("kendoAutoComplete");
// check the returned value
if (typeof autocomplete === "undefined") {
// widget instance does not exist
}
// simpler alternative syntax for the above
if (!autocomplete) {
// widget instance does not exist
}
</script>
小部件配置
要配置Kendo UI小部件,请将配置对象(键/值对)作为参数传递给jQuery插件方法。 每个窗口小部件的受支持配置选项和事件都列在相应窗口小部件的API参考中。 配置对象还可能包含将绑定到相应窗口小部件事件的事件处理程序。
以下示例演示如何设置Grid小部件的height,columns和dataSource配置选项。
<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>
Kendo UI R2 2019 SP1全新发布,最新动态请持续关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

Kendo UI for jQuery使用教程:初始化jQuery插件的更多相关文章
- Kendo UI for jQuery使用教程:入门指南
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- jQuery Mobile 和 Kendo UI 的比较(转)
jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...
- Kendo UI 初始化 Data 属性
初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...
- 关于Kendo UI 开发教程
Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...
- Kendo UI使用教程:入门指南
[Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...
- Kendo UI Widgets 概述
UI Widgets 概述 Kendo UI 是基于 jQuery 库开发的,Kendo UI widgets 是以 jQuery 插件形式提供的.这些插件的名称基本上都是以 kendo 作为前缀.比 ...
- 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使用教程:方法和事件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
随机推荐
- Nmap扫描二级目录
nmap --script http-enum -p80 192.168.2.100 //namp扫描2级目录
- 面试题 :10亿url去重只给4G内存
我能想到的有以下几种: 用语言判断去重,ex表格去重,数据库去重,文件名字去重, 有人说:10亿url ex表放不下!! 可以用树和折半的思想将10亿url,变成单元最小化的树,然后用ex表去重 ex ...
- mysql 速度优化
1.添加索引 ALTER TABLE `cw_base_house` ADD INDEX idx_house ( `villageCode`, `buildingNo`, `unitNo`, `hou ...
- 一篇文章搞懂python2、3编码
说在前边: 编码问题一直困扰着每一个程序员的编程之路,如果不将它彻底搞清楚,那么你的的这条路一定会走的格外艰辛,尤其是针对使用python的程序员来说,这一问题更加显著, 因为python有两个版本, ...
- 【Spring 源码】Spring 加载资源并装配对象的过程(XmlBeanDefinitionReader)
Spring 加载资源并装配对象过程 在Spring中对XML配置文件的解析从3.1版本开始不再推荐使用XmlBeanFactory而是使用XmlBeanDefinitionReader. Class ...
- HanLP-最短路径分词
今天介绍的内容是最短路径分词.最近换回了thinkpad x1,原因是mac的13.3寸的屏幕看代码实在是不方便,也可能是人老了吧,^_^.等把HanLP词法分析介绍结束后,还是会换回macbook ...
- 水晶报表和rdlc报表传入参数筛选
在使用报表向客户展示结果数据时,实时的在报表中显示某些特定的数据是必需的,如:显示的部门.打印的日期等.本文只简单的演示向报表内传入一个字符值. 以下是设计好报表之后传入参数的具体操作 一.首先是水晶 ...
- mapreduce运行的bug收录
在8088端口可以看到日志文件(主要看error),操作如下: 1.window jdk版本最好和linux jdk 版本一致,不然容易出现莫名奇妙的bug 之前出现一个bug: Unsupporte ...
- std::tr1::function和bind组件
C++中std::tr1::function和bind 组件的使用 在C++的TR1中(Technology Report)中包含一个function模板类和bind模板函数,使用它们可以实现类似函数 ...
- centos终端显示字母重叠
在使用VMware虚拟机安装linux之后,之后调整了中文显示,但是后来不知道怎么回事在终端显示的字母很多都是重叠的. 在百度上也找到很多的解决办法 eg: 终端键入:vi /etc/fonts/co ...