Kendo UI简介_转载
前言
因为工作需要，我与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>