Kendo UI for jQuery使用教程：入门指南-控件新闻-慧都网

Kendo UI for jQuery使用教程：入门指南

翻译|使用教程|编辑：龚雪|2019-07-30 09:53:34.783|阅读 585 次

概述：Kendo UI for jQuery提供了在短时间内构建现在Web应用程序所需要的一切。本教程主要为大家介绍Kendo UI for jQuery入门的第一步指南教程！本指南创建一个用例场景，演示如何开始使用该套件并在项目中为jQuery实现Kendo UI DatePicker小部件。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

【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微信公众号，及时获取最新动态及最新资讯