Kendo UI使用教程:入门指南_chushi6862的博客-程序员秘密

技术标签: ViewUI  ui  php  javascript  

Kendo UI最新试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库;Kendo UI for Angular是专用于Angular开发的专业级Angular UI组件;Kendo UI Support for React支持React Javascript框架,更快地构建更好的应用程序;Kendo UI Support for Vue为Vue技术框架提供可用的Kendo UI组件,更快地构建更好的Vue应用程序。

更多资源请查看【Kendo UI视频教程集合】【Kendo UI TreeView功能详解】【Kendo UI经典开发案例赏析

根据项目和参数要求,你可以:

在项目中托管Kendo UI

要在项目中托管Kendo UI,你需要:

  • 下载bundles
  • 添加CSS和JavaScript引用

下载bundles

下载任何Kendo UI软件包后,下面列出的文件夹将托管在您的本地存储库中。

  • /apptemplates——该文件夹包含独立的启动器模板。虽然它们是静态HTML文件,但建议您通过Web服务器而不是直接从文件系统打开它们,后一种方法会破坏所有Ajax数据请求。
  • /examples——容纳快速启动示例文件。虽然它们是静态HTML文件,但建议您通过Web服务器而不是直接从文件系统打开它们,后一种方法会破坏所有Ajax数据请求。
  • /js——包含缩小的JavaScript文件。
  • /src——此文件夹用于保存源代码文件,但现在它们在单独的下载包中提供。从你账户的Downloads部分访问源代码包,请注意试用版用户无法使用源代码。
  • /styles——由缩小的CSS文件和主题图像组成。 该文件夹还包含Less文件,可以传递给编译器,位于styles/folder: styles/web/和styles/mobile/的第一级文件夹。请注意,试用版中不提供Less文件。
  • /wrappers——包括服务器端包装器。由于UI for ASP.NET MVC、UI for JSP或UI for PHP发行版是必须的,因此该文件夹仅在这些版本的商业包中可用。
  • changelog.html——提供Kendo UI更新说明。

添加CSS和JavaScript引用

要在项目中使用Kendo UI,请包含所需的JavaScript和CSS文件。

Step 1:从bundle存档中提取 /js和/styles目录,并将它们复制到Web应用程序根目录。

Step 2:在HTML文档的head标记中包含Kendo UI JavaScript和CSS文件,验证在主题CSS文件之前注册了公共CSS文件。

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html><html><head><title>Welcome to Kendo UI!</title><!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --><link href="styles/kendo.common.min.css" rel="stylesheet" />

<!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. -->

  <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

<!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->

  <link href="styles/kendo.default.min.css" rel="stylesheet" />

<!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. -->

  <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

<!-- jQuery JavaScript -->

  <script src="js/jquery.min.js"></script>

<!-- Kendo UI combined JavaScript -->

  <script src="js/kendo.all.min.js"></script>

  </head>

  <body>

  Hello World!

  </body>

  </html>

注意:代码示例以后假设Kendo UI scripts和stylesheets现在已添加到文档中。

Step 3:初始化一个小部件

以下示例演示如何初始化DatePicker小部件。

示例:

1

2

3

4

5

6

7

8

<!-- HTML element from which the DatePicker would be initialized -->

<input id="datepicker" />

<script>

$(function() {

// Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin

$("#datepicker").kendoDatePicker();

});

</script>

以下示例演示了DatePicker小部件的完全初始化。

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

 

  <html>

<head>

<title>Welcome to Kendo UI!</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<body>

<input id="datepicker" />

<script>

$(function() {

$("#datepicker").kendoDatePicker();

});

</script>

</body>

</html>

安装Bower包

Bower是一个流行的Web管理程序包管理器,用于处理框架、库、资产和实用程序。

概要

Kendo UII维护2个Bower包:

  • Kendo UI Core.
  • Kendo UI Professional.

所有正式版本,Service Pack和内部版本都会上传到它们中。

重复异常的分隔符

截至Kendo UI 2016 Q2(2016.2.504)更新:

  • Scheduler用逗号(,)替换分号(;)作为重复异常的分隔符类型。
  • Scheduler不再向重复异常添加尾随分隔符。

使用CDN服务

Kendo UI CDN托管在Amazon CloudFront上。 要访问CDN服务,您可以使用不同的方法。


Kendo UI R2 2019 SP1全新发布,最新动态请持续关注Telerik中文网!

扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号

转载于:https://my.oschina.net/u/3992677/blog/3072702

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/chushi6862/article/details/100683531

智能推荐

代码高亮调整试验_weixin_30319097的博客-程序员秘密

历时两天,终于搞定了博客园的代码高亮了。首先,请大家参考一下这篇文章的作法:博客园配置windows live writer,实现本地代码高亮由于SyntaxHighlighter的版本更新了,所以文件的使用应该用新版本的SyntaxHighlighter不过现在博客园的子标题不允许插入javascript代码了,所以我们把代码放进页首或者页尾html里面。(首先你需要申请博客的js权...

[刷题之旅no31]P1038 [NOIP2003 提高组] 神经网络_cykap的博客-程序员秘密

仔细一看,仔细一想,唔是bfs。1.数据结构:1.链式前向星2.line队列3.u数组记录结点阈值4.c数组记录结点兴奋程度5.out数组用于记录最终输出结果6.队列设置三个拨针,head,tail和lasttail(lasttail用于记录上一层级结点的最后一位的下标)7.isinline数组,判断当前元素是否入队8.flag判断到底能不能兴奋思路:1.读取点的数量和边的数量2.读取点,按顺序记录点的刺激点c和阈值u,更新c和u数组值,将刺激点c大于0的点入列,同时更新tail和

深度学习 ycbcr的运用_无奈的小心酸的博客-程序员秘密_ycbcr

深度学习中,如果针对图像进行处理,通常采用ycbcr对彩色图像进行处理,将得到的结果利用神经网络对Y通道进行神经网络处理,得到处理后的灰色图像,再将彩色信息进行填充,即可得到彩色结果图像1.利用ycbcr对彩色图像进行处理,输出结果的Y通道image=imread('baboon.jpg');image = rgb2ycbcr(image);image1 = im

easyui jsp ajax 上传文件,springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项_dax eursir的博客-程序员秘密

在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件。提交表单时一直发现后台接收不到文件,后检查发现,原来是文件的id不对。文件上传框我们定义如下:Box" id="image" name="image" data-options="label:'产品图片:',buttonText:'浏览',promp...

遇到问题----hadoop组件---spark实战-----spark on k8s---hail--Expected n part files but found 0_张小凡vip的博客-程序员秘密

遇到问题在jupyter notebook中使用hail进行操作,使用命令如下:import hail as hlmt = hl.import_vcf("s3a://test-env/tmp/zzq/20200317072357")mt.show()可以成功运行,并展示数据如下:Initializing Spark and Hail with default parameters.....

随便推点

Spring系列学习之Spring Vault_boonya的博客-程序员秘密_spring vault

英文原文:https://spring.io/projects/spring-vault目录概述快速开始学习文档示例概述Spring Vault提供熟悉的Spring抽象和客户端支持,用于访问,存储和撤销机密。 它提供了与Vault交互的低级和高级抽象,使用户免于基础设施问题。通过HashiCorp的Vault,您可以在所有环境中为应用程序管理外部机密数据。 Va...

Elasticsearch --- es中用ajax实现分页_aozhe9939的博客-程序员秘密

一.后端①分页函数from django.shortcuts import render, HttpResponsefrom elasticsearch import Elasticsearchfrom elasticsearch import helpersfrom django.http.response import JsonResponsefrom web...

IT运维心得的JQKA一小套_moon392783063的博客-程序员秘密

怎么着也得立个Flag吧从今天开始,尽量的写一些自己遇到的小问题和生产环境中总结的小想法、小经验吧!哈哈!就是简单的记录一下而已,不玩太深奥的。从大学毕业后,也嗨了几家公司了,一直都是乙方运维,通信行业、电力行业、政府部门之类的也没少伺候了,公开的 SM的(she mi )项目也都干过些。发现有些“胸弟”的心态有点问题,这个问题挺普遍的,可能Ta们没觉得这是个问题,但是,我在这还是唠叨一嘴吧!算是操闲心了!问题一“自认为和客户没区别,甚至比客户都嚣张”比如在一个政府部门做三方支持,时间长了就自己觉得

ONES 万事联合创始人 \u0026 CTO 冯斌:企业服务产品的探索实践_糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖的博客-程序员秘密

想看更多产品干货文章?推荐极客时间专栏《邱岳的产品手记》,一次订阅、永久阅读。即日起,戳此订阅立享以下两大福利:\\福利一:原价 ¥58/45期,极客时间新用户注册立减 ¥30\\福利二:每邀请一位好友购买,你可获得18元现金返现,多邀多得,上不封顶,随时提现(提现流程:极客时间服务号-我的-现金奖励提现)\\近日,TGO 鲲鹏会广州分会会员、世纪互联交付中心总监李少春作为 TGO 线上分享第五季...

推荐文章

热门文章

相关标签