Kendo UI使用教程：入門指南

時間 2019-12-11

標籤 kendo 使用教程入門指南简体版

原文原文鏈接

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 Angular是專用於Angular開發的專業級Angular UI組件；Kendo UI Support for React支持React Javascript框架，更快地構建更好的應用程序；Kendo UI Support for Vue爲Vue技術框架提供可用的Kendo UI組件，更快地構建更好的Vue應用程序。html

在項目中託管Kendo UI

要在項目中託管Kendo UI，你須要：jquery

下載bundles
添加CSS和JavaScript引用

下載bundles

下載任何Kendo UI軟件包後，下面列出的文件夾將託管在您的本地存儲庫中。web

/apptemplates——該文件夾包含獨立的啓動器模板。雖然它們是靜態HTML文件，但建議您經過Web服務器而不是直接從文件系統打開它們，後一種方法會破壞全部Ajax數據請求。
/examples——容納快速啓動示例文件。雖然它們是靜態HTML文件，但建議您經過Web服務器而不是直接從文件系統打開它們，後一種方法會破壞全部Ajax數據請求。
/js——包含縮小的JavaScript文件。
/src——此文件夾用於保存源代碼文件，但如今它們在單獨的下載包中提供。從你帳戶的Downloads部分訪問源代碼包，請注意試用版用戶沒法使用源代碼。
/styles——由縮小的CSS文件和主題圖像組成。該文件夾還包含Less文件，能夠傳遞給編譯器，位於styles/folder: styles/web/和styles/mobile/的第一級文件夾。請注意，試用版中不提供Less文件。
/wrappers——包括服務器端包裝器。因爲UI for ASP.NET MVC、UI for JSP或UI for PHP發行版是必須的，所以該文件夾僅在這些版本的商業包中可用。
changelog.html——提供Kendo UI更新說明。

添加CSS和JavaScript引用

要在項目中使用Kendo UI，請包含所需的JavaScript和CSS文件。服務器

Step 1：從bundle存檔中提取 /js和/styles目錄，並將它們複製到Web應用程序根目錄。微信

Step 2：在HTML文檔的head標記中包含Kendo UI JavaScript和CSS文件，驗證在主題CSS文件以前註冊了公共CSS文件。app

示例：

 
      <!DOCTYPE html>< 
      html 
      >< 
      head 
      >< 
      title 
      >Welcome to Kendo UI!</ 
      title 
      > 
      <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --> 
      < 
      link  
      href 
      = 
      "styles/kendo.common.min.css"  
      rel 
      = 
      "stylesheet"  
      /> 
     
 
      <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. --> 
     
 
         
      < 
      link  
      href 
      = 
      "styles/kendo.rtl.min.css"  
      rel 
      = 
      "stylesheet"  
      type 
      = 
      "text/css"  
      /> 
     
 
      <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. --> 
     
 
         
      < 
      link  
      href 
      = 
      "styles/kendo.default.min.css"  
      rel 
      = 
      "stylesheet"  
      /> 
     
 
      <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. --> 
     
 
         
      < 
      link  
      href 
      = 
      "styles/kendo.default.mobile.min.css"  
      rel 
      = 
      "stylesheet"  
      type 
      = 
      "text/css"  
      /> 
     
 
      <!-- jQuery JavaScript --> 
     
 
         
      < 
      script  
      src 
      = 
      "js/jquery.min.js" 
      ></ 
      script 
      > 
     
 
      <!-- Kendo UI combined JavaScript --> 
     
 
         
      < 
      script  
      src 
      = 
      "js/kendo.all.min.js" 
      ></ 
      script 
      > 
     
 
         
      </ 
      head 
      > 
     
 
         
      < 
      body 
      > 
     
 
         
      Hello World! 
     
 
         
      </ 
      body 
      > 
     
 
         
      </ 
      html 
      > 
     

注意：代碼示例之後假設Kendo UI scripts和stylesheets如今已添加到文檔中。框架

Step 3：初始化一個小部件post

如下示例演示如何初始化DatePicker小部件。ui

示例：

 
      <!-- HTML element from which the DatePicker would be initialized --> 
     
      <input id= 
      "datepicker"  
      /> 
     
      <script> 
     
      $( 
      function 
      () { 
     
      // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin 
     
      $( 
      "#datepicker" 
      ).kendoDatePicker(); 
     
      }); 
     
      </script>

如下示例演示了DatePicker小部件的徹底初始化。

示例：

 
      <!DOCTYPE html> 
     

         
     
 
         
      < 
      html 
      > 
     
 
      < 
      head 
      > 
     
 
      < 
      title 
      >Welcome to Kendo UI!</ 
      title 
      > 
     
 
      < 
      link  
      href 
      = 
      "styles/kendo.common.min.css"  
      rel 
      = 
      "stylesheet"  
      /> 
     
 
      < 
      link  
      href 
      = 
      "styles/kendo.default.min.css"  
      rel 
      = 
      "stylesheet"  
      /> 
     
 
      < 
      script  
      src 
      = 
      "js/jquery.min.js" 
      ></ 
      script 
      > 
     
 
      < 
      script  
      src 
      = 
      "js/kendo.all.min.js" 
      ></ 
      script 
      > 
     
 
      </ 
      head 
      > 
     
 
      < 
      body 
      > 
     
 
      < 
      input  
      id 
      = 
      "datepicker"  
      /> 
     
 
      < 
      script 
      > 
     
 
      $(function() { 
     
 
      $("#datepicker").kendoDatePicker(); 
     
 
      }); 
     
 
      </ 
      script 
      > 
     
 
      </ 
      body 
      > 
     
 
      </ 
      html 
      > 
     