Kendo UI for 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通过继承基本窗口小部件类为您提供创建自定义窗口小部件的选项。
入门
1. 在kendo.ui命名空间中扩展基本Kendo UI小部件类。
本示例演示如何创建变量来保存值,这些值也有助于缩小。 整个过程包含在一个自执行的匿名函数中,以保护全局命名空间。 jQuery作为引用传入,以确保$是jQuery。 小部件本身扩展了基本小部件类,因此它被赋予了MyWidget的大写名称 - 或者小部件的名称。 在使用JavaScript命名类而不是常规对象时,这通常被认为是最佳实践。
(function($) {// Shorten references to variables which is better for uglification. kendo = window.kendo,ui = kendo.ui,Widget = ui.Widget
var MyWidget = Widget.extend({
// The initialization code goes here.
});
})(jQuery);
2. 为您的小部件提供init方法。 初始化窗口小部件时,框架会调用此方法。 这个init函数有两个参数,第一个是初始化窗口小部件的元素;第二个是您将很快指定的一组选项,这些将是配置值。
var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to initialize the widget.
Widget.fn.init.call(this, element, options);
}
});
3. 如果要扩展窗口小部件,对基础的调用是将窗口小部件从声明性初始化或标准命令式初始化转换为合并所有基本选项和自定义选项的内容。在init语句下声明这些选项,您在选项对象中声明的任何内容都可供用户作为配置值或数据属性传递。
var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to initialize the widget.
Widget.fn.init.call(this, element, options);
},
options: {
// The name is what it will appear as the kendo namespace(i.e. kendo.ui.MyWidget).
// The jQuery plugin would be jQuery.fn.kendoMyWidget.
name: "MyWidget",
// Other options go here.
...
}
});
4. 将小部件添加到Kendo UI,以下示例演示了用于创建自定义Kendo UI窗口小部件,并使其像所有其他Kendo UI窗口小部件一样可用的完整样板。
(function($) {
// Shorten the references to variables. This is better for uglification var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget
var MyWidget = Widget.extend({
init: function(element, options) {
// The base call to the widget initialization.
Widget.fn.init.call(this, element, options);
},
options: {
// The name is what it will appear as the kendo namespace(i.e. kendo.ui.MyWidget).
// The jQuery plugin would be jQuery.fn.kendoMyWidget.
name: "MyWidget",
// Other options go here.
....
}
});
ui.plugin(MyWidget);
})(jQuery);
5. 要使此小部件支持DataSource或MVVM,请实现一些其他项,以下部分讨论了创建DataSource-aware小部件的过程。本节演示的小部件是一个简单的小部件,只重复数据源中的数据,还允许您指定自己的自定义模板。 您可以将它视为一个非常笨拙的ListView,为了更容易处理,它被命名为Repeater。
要使窗口小部件识别数据源,请在数据源基础对象上使用创建的便捷方法,代码片段为您的窗口小部件初始化DataSource提供了灵活性。如果您实际在窗口小部件初始化或内联之外创建新的DataSource,则返回该DataSource。
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
6. 创建一个新的DataSource来绑定窗口小部件。此步骤不是必须的,因为您可以将DataSource设置为数组,如以下示例所示。 如果传递此数组,kendo.data.DataSource.create方法将根据此数组中的数据创建一个新的DataSource,并将其返回给that.dataSource。
$("#div").kendoRepeater({
dataSource: ["Item 1", "Item 2", "Item 3"]
});
7. 通过内联指定其配置值来创建DataSource,如以下示例所示。 该示例指定了DataSource配置,但实际上并未创建DataSource实例。 kendo.data.DataSource.create(that.options.dataSource)获取此配置对象并返回具有指定配置的新DataSource实例。
注意:要复制Kendo UI MultiSelect数据绑定操作,请显式分配kendo.data.binders.widget.multiSelectCustom = kendo.data.binders.widget.multiselect; 捆绑。
$("#div").kendoRepeater({
dataSource: {
transport: {
read: {
url: "http://mydomain/customers"
}
}
}
});
Kendo UI R3 2019全新发布,最新动态请持续关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南的更多相关文章
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web UI开发推荐!Kendo UI for jQuery自定义小部件——使用MVVM
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- kendo ui 好用的小部件--grid
Kendo Ui Grid控件,继承至Widget. https://demos.telerik.com/kendo-ui/grid/index 快速上手教程 下面的代码来自本教程 做表格时非常方 ...
- 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使用教程:小部件DOM元素结构
[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 ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Kendo UI for jQuery使用教程——创建自定义捆绑包
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
随机推荐
- 使用shell脚本常见的一些问题
Jdk版本:jdk-8u102-linux-x64 Tomcat版本:apache-tomcat-7.0.92 Redis版本:redis-5.0.0 由于公司项目的需要,要在多台服务器上面部署一些应 ...
- python基础(代码规范、命名规范、代码缩进、注释)
代码规范 PEP8(python增强建议书第8版) 每个import语句只导入一个模块 不要在行尾添加分号";" 建议每行不超过80个字符 超出部分可以用()来进行换行例如: ...
- 【C/C++】对于可重入、线程安全、异步信号安全几个概念的理解
由于前段时间,程序偶尔异常挂起不工作,检查后发现时死锁了,原因就是:在信号处理函数里面调用了fprintf. printf等io函数是需要对输出缓冲区加锁,这类函数对本身是线程安全的,但是对信号处理函 ...
- (转载)Nim博弈论
最近补上次参加2019西安邀请赛的题,其中的E题出现了Nim博弈论,今天打算好好看看Nim博弈论,在网上看到这篇总结得超级好的博客,就转载了过来. 转载:https://www.cnblogs.com ...
- 【0.2】【MySQL】常用监控指标及监控方法(转)
[MySQL]常用监控指标及监控方法 转自:https://www.cnblogs.com/wwcom123/p/10759494.html 对之前生产中使用过的MySQL数据库监控指标做个小结. ...
- failed to push some refs to 'git@github.com:cq1415583094/MyBatis.git'解决办法
将本地git仓库代码提交到GitHub上时,出现failed to push some refs to 'git@github.com:cq1415583094/MyBatis.git', 导致的原因 ...
- Type类的使用
Type类的使用(类反射)通过类获得Type: Type t = typeof(Person)通过实例对象获得类的Type: Type t = p.GetType()获取Type的方法:MethodI ...
- 使用Python基于HyperLPR/Mask-RCNN的中文车牌识别
基于HyperLPR的中文车牌识别 Bolg:https://blog.csdn.net/lsy17096535/article/details/78648170 https://www.jiansh ...
- python基础之初始函数
首先,为什么要使用函数? 函数的本质来说,就是写一串代码具有某些功能,然后封装起来,接下来可以很方便的调用 例如...然后... # s = '金老板小护士'# len(s) #在这里需求是求字符串s ...
- 小知识 Sql 格式化工具 AutoPostBack后的定位 Post和Get区别 防止被 Fream
T-Sql 格式化工具 http://jinzb.name/Common/SqlFormat.html AutoPostBack后的定位问题: 给Page 增加属性,MaintainScrollPos ...