文档半岛外围网上直营>>Kendo UI使用教程-2019>>Kendo UI for jQuery使用教程：入门指南
Kendo UI for jQuery使用教程：入门指南
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
欢迎大家阅读Kendo UI for jQuery入门的第一步指南教程！本指南创建一个用例场景，演示如何开始使用该套件并在项目中为jQuery实现Kendo UI DatePicker小部件。
1. 在本地添加所需的CSS和JavaScript文件。
您还可以使用Kendo UI CDN服务。//kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js和//kendo.cdn.telerik.com/VERSION/styles/FILENAME.min.css locations提供了CSS和JavaScript文件的缩小CDN版本。
在HTML文档的head标记中包含Kendo UI CSS和CSS JavaScript。
<!DOCTYPE html><html><head><title>Welcome to Kendo UI!</title><!-- Common (base) Kendo UI stylesheet. Register it before the Kendo UI theme-specific stylesheet. --><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" /> <!-- Default Kendo UI theme stylesheet. --> <link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" /> <!-- (Optional) Kendo UI Hybrid stylesheet. Include only if you will use the mobile devices features. --> <link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" /> <!-- jQuery JavaScript. Register it before the Kendo UI JavaScript file. --> <script src="//code.jquery.com/jquery-1.12.3.min.js"></script> <!-- Kendo UI combined JavaScript --> <script src="//kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script> </head> <body> Hello World! </body> </html>
2. 为Kendo UI DatePicker小部件添加HTML元素。
3. 使用其jQuery插件初始化DatePicker。
<!DOCTYPE html>
<html>
<head><title>Welcome to Kendo UI!</title><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" /><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" /><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<!-- HTML element from which the DatePicker would be initialized -->
<input id="datepicker" />
<script>
// Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin.
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>4. 设置DatePicker的de-DE文化区域设置。
<!DOCTYPE html>
<html>
<head><title>Welcome to Kendo UI!</title><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" /><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" /><link href="//kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<!-- Register the culture js file -->
<script src="//kendo.cdn.telerik.com/2019.2.619/js/cultures/kendo.culture.de-DE.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
// Configure the DatePicker to use German culture.
$(function() {
$("#datepicker").kendoDatePicker({
culture: "de-DE"
});
// Get a reference to the DatePicker and set its value.
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.value(new Date(2016, 10, 1));
});
</script>
</body>
</html>扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
QQ交谈
在线咨询
渝公网安备
50010702500608号
客服热线