亚洲亚洲人成,久久97精品久久久久久久不卡,欧美日韩国产一区二区三区地区

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

翻譯|使用教程|編輯：龔雪|2019-07-30 09:53:34.783|閱讀 663 次

概述：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微信公眾號，及時獲取最新動態及最新資訊