Kendo UI使用教程：入门指南-控件新闻-慧都网

Kendo UI使用教程：入门指南

原创|使用教程|编辑：龚雪|2019-07-11 10:01:55.197|阅读 883 次

概述：Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件，本教程为大家介绍如何开始使用Kendo UI，如何在项目中托管Kendo UI、安装Bower包、使用CDN服务等。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

在项目中托管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文件。

示例：

<!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小部件。

示例：

<!-- 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小部件的完全初始化。

示例：

<!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微信公众号，及时获取最新动态及最新资讯

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：慧都网

上一篇：跨平台图表控件AnyChart教程：如何使用多级X轴编写JS柱形图下一篇：Spire.PDF图片和图形教程：如何获取PDF文档中的文本和图片

在线采购

中文文档库

试用/Demo下载

开发社群