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 ...
随机推荐
- CTF—攻防练习之HTTP—暴力破解
攻击机:192.168.32.152 靶机:192.168.32.164 首先nmap,nikto -host ,dirb 扫描开放带端口,探测敏感文件,扫描目录 开放了21,22,80端口,看到一个 ...
- 微信路由navigateTo
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { res:2 }, search: function(e) { var that = th ...
- cisco路由的ip路由(一)
路由Corp配置Corp#sh run Building configuration... Current configuration : 1652 bytes ! version 12.4 no s ...
- 【Linux开发】linux中关于dma_alloc_coherent的用法
大家都知道,DMA的操作是需要物理地址的,但是在linux内核中使用的都是虚拟地址,如果我们想要用DMA对一段内存进行操作,我们如何得到这一段内存的物理地址和虚拟地址的映射呢?dma_alloc_co ...
- tyan 3+1+15 远程
直接修改好BIOS,输入IP即可访问,帐号anonymous 这个登录 也就是为空,直接写入密码,登录即可
- Luogu P5354 [Ynoi2017]由乃的OJ
题目 这题以前叫睡觉困难综合征. 首先我们需要知道起床困难综合征怎么做. 大概就是先用一个全\(0\)和全\(1\)的变量跑一遍处理出每一位\(1\)和\(0\)最后会变成什么. 然后高位贪心:如果当 ...
- linux 安装 python 最全教程
环境:centos6.5 centos6.5 自带的 python 版本是 2.6.6,需要重新安装 2.7: centos7 自带的 python 版本是 2.7.5 基本操作 在安装新版本之前,一 ...
- 三维数点的CDQ分治板子
int n, k, tot; struct _ {int x,r,f;} a[N]; struct __ { int type; ll x,y; bool operator < (const _ ...
- deepin 15.10.1 GTX1060 NVIDIA 驱动安装,双屏显示问题记录
有一段时间没有用Linux了.由于买了个4k的戴尔显示屏,在deepin系统上无法用,从昨晚到现在,总于解决了我的问题! 问题1:无法直接在深度的显卡驱动管理器哪里直接切换,网上看到很多人都有这个问题 ...
- 【Java】Java程序报错:EXCEPTION_ACCESS_VIOLATION (0xc0000005)
运行Java程序的时候,报错:EXCEPTION_ACCESS_VIOLATION (0xc0000005): 根据原网页的说明: EXCEPTION_ACCESS_VIOLATION In rare ...