Kendo UI for jQuery使用教程：入門指南
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。
歡迎大家閱讀Kendo UI for jQuery入門的第一步指南教程！本指南創(chuàng)建一個(gè)用例場(chǎng)景，演示如何開始使用該套件并在項(xiàng)目中為jQuery實(shí)現(xiàn)Kendo UI DatePicker小部件。
1. 在本地添加所需的CSS和JavaScript文件。
您還可以使用Kendo UI CDN服務(wù)。https://kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js和https://kendo.cdn.telerik.com/VERSION/styles/FILENAME.min.css locations提供了CSS和JavaScript文件的縮小CDN版本。
在HTML文檔的head標(biāo)記中包含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="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" /> <!-- Default Kendo UI theme stylesheet. --> <link href="https://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="https://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="https://code.jquery.com/jquery-1.12.3.min.js"></script> <!-- Kendo UI combined JavaScript --> <script src="https://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="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" /><link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" /><link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://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. 設(shè)置DatePicker的de-DE文化區(qū)域設(shè)置。
<!DOCTYPE html>
<html>
<head><title>Welcome to Kendo UI!</title><link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" rel="stylesheet" /><link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css" rel="stylesheet" /><link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<!-- Register the culture js file -->
<script src="https://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>Kendo UI R2 2019 SP1全新發(fā)布，最新動(dòng)態(tài)請(qǐng)持續(xù)關(guān)注Telerik中文網(wǎng)！
掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
提供CDN加速/云存儲(chǔ)服務(wù)
客服熱線