Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。本教程主要为大家介绍Kendo UI for jQuery入门的第一步指南教程！本指南创建一个用例场景，演示如何开始使用该套件并在项目中为jQuery实现Kendo UI DatePicker小部件。
【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服务。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标记中包含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. 设置DatePicker的de-DE文化区域设置。
<!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全新发布，最新动态请持续关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！