【Kendo UI 中文教程】概述

来源：互联网发布：linux remount什么意思编辑：程序博客网时间：2024/05/20 08:44

简介

虽说如今业界的各种前端框架层出不穷，但在为后台管理系统选择前端框架的时候却经常陷入纠结。
而从笔者实践经验来看，KendoUI算是一个不错的选择，总结起来其优点有三

各种组件和功能都比较完善
文档比较详细（虽然是英文的而且经常要翻墙）
界面的风格比较现代化，还可以搭配bootstrap等流行框架

不过，KendoUI在国内的使用者却不多，中文的教程也不多见，因此咱抛砖引玉，介绍一下Kendo UI的功能以及一些实践经验。

下载

官网地址： KendoUI下载
百度网盘： KendoUI下载密码：apga

简单说明一下压缩包中各文件夹里的东西。

文件说明 /apptemplates 一些app的模版，可以直接解压出来用浏览器打开的 /examples 一些样例，拉到最后面有一个Index.html用浏览器打开 /js 压缩后的js文件 /styles 压缩后的css文件以及图片

引入Kendo UI

首先引用kendo的css和js，再引入kendo依赖的jQuery。注意的是css文件里kendo.common.css必须在kendo.default.css前面。如下代码：

        <!DOCTYPE html>        <html>        <head>            <title>Welcome to Kendo UI!</title>            <!-- common.css -->            <link href="styles/kendo.common.min.css" rel="stylesheet" />            <!-- 主题样式 -->            <link href="styles/kendo.default.min.css" rel="stylesheet" />            <!-- jQuery -->            <script src="js/jquery.min.js"></script>            <!-- kendo js-->            <script src="js/kendo.all.min.js"></script>        </head>        <body>            Hello World!        </body>        </html>

使用Kendo UI组件

下面我们用kendo UI的组件DatePicker，做一个选择日期的输入框。只需要做两步

在body里面写一个input标签，给它一个id 写js
用jquey选中这个元素，调用kendoDatePicker初始化组件

代码如下：

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

保存为html文件，用浏览器打开，第一个kendo组件就完成啦！
这里写图片描述

0 0