安裝Bower
是一個流行的web包管理器，用于處理框架、庫、資產和實用程序。
1.安裝軟件包
Kendo UI for jQuery維護了商業的Kendo UI for jQuery (Kendo UI Professional)和開源的Kendo UI for jQuery (Kendo UI Core) Bower包。
所有正式版本、服務包和內部構建都被上傳到兩個發行包中。
bower的商業分銷
提示：商業KendoUI Bower包僅供商業許可證持有人使用。
商業發行包作為私有GitHub存儲庫提供。要訪問它的內容請激活Kendo UI for jQuery或DevCraft的訂閱，Bower會在安裝和更新過程中提示你輸入用戶名和密碼。
在安裝Bower包的過程中，您可能需要多次確認您的憑據。
安裝商用發行包的命令如下：
Copy codebower install //bower.telerik.com/bower-kendo-ui.git --config.shallowCloneHosts="bower.telerik.com"
我們建議在bower安裝時指定shallowCloneHosts配置鍵，因為啟用bower淺克隆可以極大地加快下載速度。
使用bower info kendo-ui——verbose命令查看可用的商業發行版本。
你也可以將這個包添加到bower.json文件中。
"dependencies": {
"kendo-ui": "http://bower.telerik.com/bower-kendo-ui.git#~2023.2.606"
}
Bower上的開源發行版
開源的Bower包可以作為公共GitHub存儲庫獲得，并且在Bower注冊表中也注冊為kendo-ui-core。
要安裝Kendo UI Core Bower包請運行Bower install Kendo - UI - Core命令。
執行bower info kendo-ui-core——verbose命令可以查看該包可用的開源發行版本。
2. 添加所需的JavaScript和CSS文件
一旦腳本和樣式在項目目錄中可用，您就可以直接使用已安裝的包。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Kendo UI with Bower</title> <link rel="stylesheet" href="bower_components\kendo-ui\styles\kendo.default-main.min.css"> <script src="bower_components\kendo-ui\js\jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="bower_components\kendo-ui\js\kendo.all.min.js" type="text/javascript" charset="utf-8"></script> </head> </html>
3.為組件初始化添加HTML元素
根據你需要的組件，你可以從不同的元素初始化Kendo UI控件。在這一步中，您將添加一個新的輸入元素，從中創建一個Kendo UI DropDownList。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Kendo UI with Bower</title> <link rel="stylesheet" href="bower_components\kendo-ui\styles\kendo.default-main.min.css"> <script src="bower_components\kendo-ui\js\jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="bower_components\kendo-ui\js\kendo.all.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input id="ddl" /> </body> </html>
4. 初始化和配置組件
下面的示例演示如何使用一些基本配置初始化DropDownList。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kendo UI with Bower</title>
<link rel="stylesheet" href="bower_components\kendo-ui\styles\kendo.default-main.min.css">
<script src="bower_components\kendo-ui\js\jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bower_components\kendo-ui\js\kendo.all.min.js" type="text/javascript" charset="utf-8"></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號
客服熱線