前言
因爲工作需要，我與Kendo UI相識。Kendo UI是一個豐富的前端框架，和Lay UI類似。官方的文檔都是英文，對於 “差425分考過四級”😂的我來說，有難度。。。
還好，有前輩總結了Kendo UI，下面就來轉載一下，原文地址http://www.scscms.com/html/article/20131025-kendo-ui.html
轉載內容
本文在原有基礎上做了修改，添加了一些內容。
👉簡介
Kendo UI Web包含所有創建高速HTML5 web app的必備元素：UI組件、數據源、驗證、一個MVVM框架、主題、模板等等。
移動HTML5帶UI的開發框架層出不窮，常見的有Sencha Touch、jQuery Mobile前者效果較好，收費，學習成本高；後者效果一般，但兼容性好，免費，學習成本低，會jQuery的同學上手快。其實還有一個夾在兩者之間的框架叫Kendo UI。
Kendo是日本語意：劍道；劍術。他們的Logo就是一個武士形象🤺，給人感覺真有本領，犀利。kendoui效果比jQuery Mobile要好，次於Sencha Touch，但學習成本也次於它。Kendo UI分三部分：
- Kendo UI Web，包含所有創建高速HTML5 web app的必備元素：UI組件、數據源、驗證、一個MVVM框架、主題、模板等；
- Kendo UI Mobile，創建的應用程序感覺就像本地應用程序。僅使用HTML5和JavaScript，通過一個簡單的UI代碼庫便可支持大多數手機和平板電腦平臺；
- Kendo UI DataViz，跨平臺跨設備的數據可視化組件可以創建豐富的圖表和儀表盤。
吧啦吧啦，來誇誇Kendo UI有多麼厲害吧🤣🤣🤣
Kendo UI擁有統一測試，支撐框架下你所需要的所有工具。它使得你專注於創建自己的應用程序，而不是從成百上千不支持的插件和庫中創建（和支撐）框架。Kendo UI Web包括簡單、一致的編程接口，安全可靠的數據源，精美和新穎的UI小部件，MVVM框架，主題和模板等。你需要做的就是以Kendo UI Web爲基礎，去開發現代化、交互式的HTML5和JavaScript應用程序。
Kendo UI Web支持即時觸屏功能。所有的Kendo UI Web小部件都全面支持觸屏設備，如iPad、iPhone和Android，因此你的Web應用程序能用在許多不同輸入選項的設備上。甚至Kendo UI的拖拽框架都支持觸摸屏，你無需僅僅爲了處理鼠標和觸摸屏輸入而複製代碼。
Kendo UI的每個方面都從底層開始構建，以提供強大的JavaScript應用程序性能。Kendo UI不是另一個jQuery UI的克隆，它的每一個決定都是從優化性能出發。從輕量級的、執行明顯快於jQurey模板的內置模板庫，到利用CSS3硬件加速的（如果可能）優化動畫 和先進的虛擬化用戶界面，Kendo UI不遺餘力地提供高性能的客戶端UI。
👉Kendo UI常用組件
Kendo UI的常用組件主要有：
- ✔️AutoComplete 自動補齊
- 🕓Calendar組件 日曆表
- 🌈ColorPicker 顏色選擇器
- 💎ComboBox 下拉列表框
- 🕕DatePicker 日期選擇組件
- 🕖DateTimePicker 日期時間控件
- 🔽DropDownList 下拉菜單
- 🧾Editor 在線編輯器
- 🏢Grid 表格組件
- 🔘ListView 列表視圖
- 🍜Menu 菜單
- 🔳MultiSelect 多選框
- 🔟NumericTextBox 數值文本框
- 🎹PanelBar 手風琴選項卡
- 🈷️Scheduler 日程調度表
- 🔰Slider 滑動控制器
- ➖Splitter 界面分割符
- 💾TabStrip 選項卡
- 🕤TimePicker 時間選擇器
- ❔ Tooltip 提示工具
- 🌴TreeView 樹型視圖
- 📟Window 彈窗
框架相關的組件有：
- 🎥DataSource 數據源
- 🧐Templates 模板
- 🙄MVVM 視圖模型
- ⭐️Effects 8種頁面特效
- ✋Drag & Drop 拖放
- 🕵️♂️Validator 表單驗證
- 🌏Globalization 全球化數據轉換
- ❄️Styling 樣式
👉搭建一個Kendo UI測試項目
後續的轉載文章，就基於這個測試項目來試驗。這算是對原文的一個完善吧~
🍂準備開發包
從Telerik官網https://www.telerik.com/kendo-jquery-ui上下載試用版開發包。下載後解壓kendoui.for.jquery.20xx.trial.zip包，得到下面的目錄結構：
KendoUI # the dir where you unzip the package 解壓縮的目錄
|_ apptemplates
|_ examples # 一些示例
|_ js # minify後的JavaScript庫
|_ license-agreements
|_ src
|_ styles # minify後的CSS及主題資源庫
|_ typescript
|_ vsdoc # JavaScript Intellisense的支持文件
|_ changelog.html # 版本日誌
|_ README
我從官網上下載了kendoui.for.jquery.2020.1.219.trial.zip，放到百度網盤上，大家可以下載使用。
鏈接：https://pan.baidu.com/s/10npXyGQrcKhI6-L74E3aPA
提取碼：n0wf
🍂搭建測試項目
可以考慮使用HBuilderX（😁當然也可以用別的軟件）創建一個項目，將KendoUI的js目錄拷貝到項目的js目錄中，將KendoUI的styles目錄拷貝到項目的css目錄中。項目的目錄結構如下所示：
KendoUItest
|_ css
| |_ styles # 拷貝自KendoUI的styles
|_ img
|_ js
| |_ kendojs # 拷貝自KendoUI的js
|_ index.html # Web應用測試頁
|_ dataviz.html # 數據顯示測試頁
|_ mobile.html # 移動應用測試頁
🍂熱身 - 導入css js
下面的3個例子，主要展示了在不同場合（web，數據，移動），需要導入的基本的css js有哪些。
index.html的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI web</title>
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css"/>
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css"/>
<script src="./js/kendojs/jquery.min.js"></script>
<script src="./js/kendojs/kendo.web.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script type="text/javascript">
$(function (){
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
dataviz.html的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI DataViz</title>
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.dataviz.min.css"/>
<script src="./js/kendojs/jquery.min.js"></script>
<script src="./js/kendojs/kendo.dataviz.min.js"></script>
</head>
<body>
<div id="gauge"></div>
<script type="text/javascript">
$(function (){
$("#gauge").kendoRadialGauge();
});
</script>
</body>
</html>
mobile.html的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile</title>
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.mobile.all.min.css"/>
<script src="./js/kendojs/jquery.min.js"></script>
<script src="./js/kendojs/kendo.mobile.min.js"></script>
</head>
<body>
<div data-role="view" data-title="View" id="index">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<footer data-role="footer">
<div data-role="tabstrip">
<a data-icon="home" href="#index">Home</a>
<a data-icon="settings" href="#settings">Settings</a>
</div>
</footer>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application();
</script>
</body>
</html>