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 ...
随机推荐
- SQLSERVER去除某一列的重复值并显示所有数据\DISTINCT去重\ISNULL()求SUM()\NOT EXISTS的使用
进入正题,准备我们的测试数据 1.我们要筛选的数据为去除 GX 列的重复项 并将所有数据展示出来,如图所示: ' 2.这种情况下我们是不可以使用DISTINCT来去重的,我们可以来尝试一下: 首先,单 ...
- PHP curl出现SSL certificate problem: self signed certificate in certificate chain
使用PHP curl请求https的时候出现错误“SSL certificate problem: self signed certificate in certificate chain”,这种情况 ...
- IE条件注释语句
项目 范例 说明 ! [if !IE] The NOT operator. This is placed immediately in front of the _feature_, _operato ...
- Django模板系统-标签Tags
for <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} </ul ...
- 面试题 :10亿url去重只给4G内存
我能想到的有以下几种: 用语言判断去重,ex表格去重,数据库去重,文件名字去重, 有人说:10亿url ex表放不下!! 可以用树和折半的思想将10亿url,变成单元最小化的树,然后用ex表去重 ex ...
- 【并行计算-CUDA开发】FPGA 设计者应该学习 OpenCL及爱上OpenCL的十个理由
为什么要学习OpenCL呢?就目前我所从事的医疗超声领域,超声前端的信号处理器一般是通过FPGA或FPGA+DSP来设计的,高端设备用的是FPGA+ GPU架构.传统的设计方法是通过HDL语言来进行设 ...
- 微服务之服务注册与发现--Eureka(附代码)
该贴为入门贴,看完可快速知道服务注册与发现是什么?怎么用?至于深入的内容不在此篇文章所述之内,请自行百度. 内容来自:https://blog.csdn.net/nanbiebao6522/artic ...
- 如何用快排思想在O(n)内查找第K大元素--极客时间王争《数据结构和算法之美》
前言 半年前在极客时间订阅了王争的<数据结构和算法之美>,现在决定认真去看看.看到如何用快排思想在O(n)内查找第K大元素这一章节时发现王争对归并和快排的理解非常透彻,讲得也非常好,所以想 ...
- 链表--笔记--数据结构(C++版)王红梅--自我思路整理与梳理
看到这篇文的很多人大概都知道链表是个什么玩意了.简单说就是一个又一个的指针,指针之间用指针连接起来. 本文的阅读 适合有c++基础的人群 以下: 这叫做一个结点. 这就是一个链表.我们主要使用的是 ...
- 【pytorch】学习笔记(三)-激励函数
[pytorch]学习笔记-激励函数 学习自:莫烦python 什么是激励函数 一句话概括 Activation: 就是让神经网络可以描述非线性问题的步骤, 是神经网络变得更强大 1.激活函数是用来加 ...