文章目录
前言转载内容👉简介👉Kendo UI常用组件👉搭建一个Kendo UI测试项目 🍂准备开发包 🍂搭建测试项目 🍂热身 - 导入css js
前言
因为工作需要，我与Kendo UI相识。Kendo UI是一个丰富的前端框架，和Lay UI类似。官方的文档都是英文，对于 “差425分考过四级”😂的我来说，有难度。。。
官方文档地址 https://docs.telerik.com/kendo-ui/introduction官方示例地址 https://demos.telerik.com/kendo-ui/
还好，有前辈总结了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的代码如下：
dataviz.html的代码如下：
mobile.html的代码如下：