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自定义小部件第一弹!不得不看的入门指南的更多相关文章

  1. Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  2. 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 ...

  3. kendo ui 好用的小部件--grid

    Kendo Ui Grid控件,继承至Widget. https://demos.telerik.com/kendo-ui/grid/index  快速上手教程  下面的代码来自本教程 做表格时非常方 ...

  4. Kendo UI for jQuery使用教程:使用MVVM初始化(一)

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  5. Kendo UI for jQuery使用教程:小部件DOM元素结构

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  6. 不知如何摧毁Kendo UI for jQuery小部件?这份指南不得不看

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  7. Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. Kendo UI for jQuery使用教程——创建自定义捆绑包

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. python基础知识(正则表达式)

    使用正则表示式分割字符串 split() re.split(pattern,string,[maxsplit],[flags]) re.split(指定一个模式字符串,要匹配的字符串,最大的拆分次数, ...

  2. DOM事件练习 II

    select框联动效果 需求:当在textarea中输入内容,点击留言按钮,会添加到浏览器中,最新留言出现在最顶端. <!DOCTYPE html> <html lang=" ...

  3. 【AMAD】django-filer -- 一个管理文件和图片的django app

    动机 简介 个人评分 动机 django-filer1可以让你像一些云存储一样使用WEB UI控制你的文件. 简介 下面是前端图片:   个人评分 类型 评分 实用性 ⭐️⭐️⭐️⭐️ 易用性 ⭐ ...

  4. URL库函数

    1.urlopen from urllib import request resp=request urlopen('http://www.baidu.com') print(resp.read()) ...

  5. 【机器学习】Learning to Rank之Ranking SVM 简介

    Learning to Rank之Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning t ...

  6. 代码: 0x80131500 win10应用商店崩溃了

    网上搜索大部分认同的结果如下 1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可) 2.点开高级往下拉,勾上"使用TLS 1.2& ...

  7. java.sql.SQLException: Access denied for user 'root'@'10.10.7.180' (using password: YES)

    1.刚开始连接数据库提示是: java.sql.SQLException: Access denied for user 'root'@'10.10.7.180' (using password: N ...

  8. [c++] 用宏定义一个函数

    要点:变量都用括号括起来,防止出错,结尾不需要;.在实际编程中,不推荐把复杂的函数使用宏,不容易调试.多行用\ 要写好C语言,漂亮的宏定义是非常重要的.宏定义可以帮助我们防止出错,提高代码的可移植性和 ...

  9. [转帖]2018年的新闻: 国内首家!腾讯主导Apache Hadoop新版本发布

    国内首家!腾讯主导Apache Hadoop新版本发布   https://blog.csdn.net/weixin_34194317/article/details/88811258 腾讯也挖了很多 ...

  10. CF 1133B Preparation for International Women's Day

    题目链接:http://codeforces.com/problemset/problem/1133/B 题目分析 读完题目,凡是先暴力.....(不用想,第四组数据就TLE了,QAQ) 当两个数的和 ...