使用CDN

Kendo UI for jQuery CDN駐留在Amazon CloudFront上。該服務(wù)維護(hù)官方的Kendo UI for jQuery版本和服務(wù)包，不提供訪問(wèn)內(nèi)部構(gòu)建的權(quán)限。

提示：從R3 2022版本開(kāi)始，您需要使用license文件來(lái)激活CDN分發(fā)。

1. 添加所需的JavaScript和CSS文件

提示：https://da7xgjtj801h2.cloudfront.net/ URL仍然有效，但不再推薦用于新項(xiàng)目。

Kendo UI CDN提供以下服務(wù)：

kendo.cdn.telerik.com
(Without cookies) cdn.kendostatic.com

添加CSS文件

css文件可在https://kendo.cdn.telerik.com/themes/<version>/<theme>/<swatch>.css中獲得。例如您可以從https://kendo.cdn.telerik.com/themes/6.4.0/default/default-main.css位置加載默認(rèn)主題的6.4.0版本。

添加所需的JavaScript文件

要為Kendo UI for jQuery組件導(dǎo)入所需的JavaScript文件，可以使用以下方法之一：

使用JavaScript模塊——2022.3.1109版本引入的新方法。
使用打包的javascript——這是包含腳本的傳統(tǒng)方式。

JavaScript模塊：

JavaScript模塊位于/mjs/文件夾中，若要在項(xiàng)目中包含JavaScript模塊，請(qǐng)使用帶有type=module屬性的script標(biāo)記。

下面的例子演示了如何包括單個(gè)組件模塊。

Copy code<script src="https://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="https://kendo.cdn.telerik.com/2023.2.606/mjs/kendo.all.js" type="module"></script> <!-- Include all Kendo UI modules. -->

捆綁JavaScript：

Kendo UI for jQuery庫(kù)的捆綁版本可以在https://kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js上獲得。例如您可以從https://kendo.cdn.telerik.com/2023.2.606/js/kendo.all.min.js位置加載2023.2.606版本。

縮小的Kendo UI for jQuery腳本可以在KendoUI Q1 2014 SP1版本中使用。要加載它們，請(qǐng)使用https://kendo.cdn.telerik.com/2023.2.606/js/kendo.ui.core.min.js URL。

2. 設(shè)置License文件

生成license文件并按照提示操作。

3.為組件初始化添加HTML元素

根據(jù)您需要的組件，您可以從不同的元素初始化Kendo UI控件，在這一步中您將添加一個(gè)新的輸入元素，并從中創(chuàng)建一個(gè)Kendo UI DropDownList。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kendo UI using CDN</title>

<link rel="stylesheet"  />

<script src="https://kendo.cdn.telerik.com/2023.2.606/js/jquery.min.js"></script>
<script src="https://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"  />

<script src="https://kendo.cdn.telerik.com/2023.2.606/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.606/js/jszip.min.js"></script>
<script src="https://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>

使用CDN

1. 添加所需的JavaScript和CSS文件

2. 設(shè)置License文件

3.為組件初始化添加HTML元素

4. 初始化和配置組件

用科技創(chuàng)就卓越

Create excellence with technology