Kendo UI简介_转载

最新推荐文章于 2024-06-19 10:31:26 发布

小匠石钧知

最新推荐文章于 2024-06-19 10:31:26 发布

阅读量873

点赞数 1

分类专栏： KendoUI学习文章标签：前端

原文链接：http://www.scscms.com/html/article/20131025-kendo-ui.html

版权

KendoUI学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
转载内容

前言

因为工作需要，我与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的代码如下：

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