文檔金喜正規買球>>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號
客服熱線