安裝Bower
是一個(gè)流行的web包管理器，用于處理框架、庫(kù)、資產(chǎn)和實(shí)用程序。
1.安裝軟件包
Kendo UI for jQuery維護(hù)了商業(yè)的Kendo UI for jQuery (Kendo UI Professional)和開(kāi)源的Kendo UI for jQuery (Kendo UI Core) Bower包。
所有正式版本、服務(wù)包和內(nèi)部構(gòu)建都被上傳到兩個(gè)發(fā)行包中。
bower的商業(yè)分銷(xiāo)
提示：商業(yè)KendoUI Bower包僅供商業(yè)許可證持有人使用。
商業(yè)發(fā)行包作為私有GitHub存儲(chǔ)庫(kù)提供。要訪(fǎng)問(wèn)它的內(nèi)容請(qǐng)激活Kendo UI for jQuery或DevCraft的訂閱，Bower會(huì)在安裝和更新過(guò)程中提示你輸入用戶(hù)名和密碼。
在安裝Bower包的過(guò)程中，您可能需要多次確認(rèn)您的憑據(jù)。
安裝商用發(fā)行包的命令如下：
Copy codebower install //bower.telerik.com/bower-kendo-ui.git --config.shallowCloneHosts="bower.telerik.com"
我們建議在bower安裝時(shí)指定shallowCloneHosts配置鍵，因?yàn)閱⒂胋ower淺克隆可以極大地加快下載速度。
使用bower info kendo-ui——verbose命令查看可用的商業(yè)發(fā)行版本。
你也可以將這個(gè)包添加到bower.json文件中。
"dependencies": {
"kendo-ui": "http://bower.telerik.com/bower-kendo-ui.git#~2023.2.606"
}
Bower上的開(kāi)源發(fā)行版
開(kāi)源的Bower包可以作為公共GitHub存儲(chǔ)庫(kù)獲得，并且在Bower注冊(cè)表中也注冊(cè)為kendo-ui-core。
要安裝Kendo UI Core Bower包請(qǐng)運(yùn)行Bower install Kendo - UI - Core命令。
執(zhí)行bower info kendo-ui-core——verbose命令可以查看該包可用的開(kāi)源發(fā)行版本。
2. 添加所需的JavaScript和CSS文件
一旦腳本和樣式在項(xiàng)目目錄中可用，您就可以直接使用已安裝的包。
<!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元素
根據(jù)你需要的組件，你可以從不同的元素初始化Kendo UI控件。在這一步中，您將添加一個(gè)新的輸入元素，從中創(chuàng)建一個(gè)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交談
在線(xiàn)咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線(xiàn)