安装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": "//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号
客服热线