操碰在线,老湿影院免费,在线视频福利

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

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

概述：Kendo UI for jQuery提供了在短時(shí)間內(nèi)構(gòu)建現(xiàn)在Web應(yīng)用程序所需要的一切。本教程主要為大家介紹Kendo UI for jQuery入門的第一步指南教程！本指南創(chuàng)建一個(gè)用例場(chǎng)景，演示如何開始使用該套件并在項(xiàng)目中為jQuery實(shí)現(xiàn)Kendo UI DatePicker小部件。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

【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庫。

歡迎大家閱讀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ù)。//kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js和//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="//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. 設(shè)置DatePicker的de-DE文化區(qū)域設(shè)置。

<!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>

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊