使用CDN
Kendo UI for jQuery CDN驻留在上。该服务维护官方的Kendo UI for jQuery版本和服务包，不提供访问内部构建的权限。
提示：从R3 2022版本开始，您需要来激活CDN分发。
1. 添加所需的JavaScript和CSS文件
提示： URL仍然有效，但不再推荐用于新项目。
Kendo UI CDN提供以下服务：
- kendo.cdn.telerik.com
- (Without cookies) cdn.kendostatic.com
添加CSS文件
css文件可在//kendo.cdn.telerik.com/themes/<version>/<theme>/<swatch>.css中获得。例如您可以从//kendo.cdn.telerik.com/themes/6.4.0/default/default-main.css位置加载默认主题的6.4.0版本。
添加所需的JavaScript文件
要为Kendo UI for jQuery组件导入所需的JavaScript文件，可以使用以下方法之一：
- ——2022.3.1109版本引入的新方法。
- ——这是包含脚本的传统方式。
JavaScript模块：
位于/mjs/文件夹中，若要在项目中包含JavaScript模块，请使用带有type=module属性的script标记。
下面的例子演示了如何包括单个组件模块。
Copy code<script src="//kendo.cdn.telerik.com/2023.2.606/mjs/kendo.grid.js" type="module"></script> <!-- Include the Grid module. The rest of the dependencies required by the Grid will be loaded automatically. -->
下面的示例展示了如何包含所有可用模块。
<script src="//kendo.cdn.telerik.com/2023.2.606/mjs/kendo.all.js" type="module"></script> <!-- Include all Kendo UI modules. -->
捆绑JavaScript：
Kendo UI for jQuery库的捆绑版本可以在//kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js上获得。例如您可以从//kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js位置加载2023.2.606版本。
缩小的Kendo UI for jQuery脚本可以在KendoUI Q1 2014 SP1版本中使用。要加载它们，请使用//kendo.cdn.telerik.com/2023.2.606/js/kendo.ui.core.min.js URL。
2. 设置License文件
并按照提示操作。
3.为组件初始化添加HTML元素
根据您需要的组件，您可以从不同的元素初始化Kendo UI控件，在这一步中您将添加一个新的输入元素，并从中创建一个Kendo UI DropDownList。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Kendo UI using CDN</title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/themes/6.4.0/default/default-main.css" /> <script src="//kendo.cdn.telerik.com/2023.2.606/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js"></script> </head> <body> <input id="ddl" /> </body> </html>
4. 初始化和配置组件
下面的示例演示了如何使用一些基本配置初始化DropDownList。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kendo UI using CDN</title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/themes/6.4.0/default/default-main.css" />
<script src="//kendo.cdn.telerik.com/2023.2.606/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2023.2.606/js/jszip.min.js"></script>
<script src="//kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js"></script>
</head>
<body>
<input id="ddl" />
<script>
$("#ddl").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
</script>
</body>
</html>
QQ交谈
在线咨询
渝公网安备
50010702500608号
客服热线