Kendo UI开发教程:准备开发环境

转帖|使用教程|编辑:龚雪|2016-09-27 09:16:51.000|阅读 1037 次

概述:本文主要为大家介绍使用Kendo UI进行开发时,应如何设置开发环境。

相关链接:

Kendo UI WebKendo UI DataVizKendo UI Mobile需要您从网站下载试用版开发包,注意需要注册后才能下载,下载后直接解压后包含下面几个文件和目录: /example

  1. Kendo UI Web
  2. Kendo UI DataViz
  3. Kendo UI Mobile

下载后直接解压后包含下面几个文件和目录:

  • /examples ? 示例
  • /js ? minified 化后的JavaScript库
  • /vsdoc JavaScript Intellisense 支持文件
  • /styles ? minified后的CSS及主题资源
  • changelog.html ? Kendo UI 发布文件

如果你下载服务器端支持(比如ASP.NET,PHP等)还可能包含

  • wrappers 目录,支持服务器端UI组件的封装

本教程侧重于直接使用JavaScript,服务器端支持只是使用PHP,Net等服务器端API生产这些客户端代码(主要是UI组件的配置),Kendo UI应用不需要这些服务器端封装就可以运行。

这里我们使用Visual Studio 2012 IDE作为开发环境,你可以使用你自己熟悉的开发工具,或者直接使用NotePad都可以开发基于Kendo UI的Web应用。

下面就可以使用Keudo UI 来开发Web应用了。首先使用Visual Studio 创建一个空的 Web Site ,然后及Kendo UI的 js和 styles 目录拷贝到这个新创建的Website 应用中。你如果直接使用Notepad作为开发工具,可以创建一个开发目录,然后把js,和Styles目录拷贝过来也是一样的。使用Visual Studio的一个好处是支持Intelisense ,帮助编写JavaScript代码,这是就需要把vsdoc的内容拷贝到js目录下。

然后添加三个 HTML 文档用来测试:

  • index.html     Web应用测试页
  • mobile.html  移动应用测试页
  • dataviz.html  数据显示测试页
>Kendo UI开发教程

Kendo UI Web

编写基于桌面系统的Web应用,使用KendoUI WEB Javascript库,在Html的Head部分添加对应的CSS和JavaScrpt,这里我们使用一个DataPicker 控件做为示例,完整代码如下:

<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href=“styles/kendo.common.min.css” rel=“stylesheet” />
<link href=“styles/kendo.default.min.css” rel=“stylesheet” />
<script src=“js/jquery.min.js”></script>
<script src=“js/kendo.web.min.js”></script>
</head>
<body>
<input id=“datepicker” />
<script>
$(function () {
$(“#datepicker”).kendoDatePicker();
});
</script>
</body>
</html>
>Kendo UI开发教程

如果能够正确显示dataPicker控件,就表示Kendo UI Web开发环境已经正确设置好了。

Kendo UI DataViz

如果需要开发数据显示控件的Web页面(比如DataGrid,表格等),在页面添加DataViz库和CSS的应用,如下例显示一个仪表盘:

<!doctype html>
<html>
<head>
<title>Kendo UI DataViz</title>
<link href=“styles/kendo.dataviz.min.css” rel=“stylesheet” />
<script src=“js/jquery.min.js”></script>
<script src=“js/kendo.dataviz.min.js”></script>
</head>
<body>
<div id=“gauge”></div>
<script>
$(function () {
$(“#gauge”).kendoRadialGauge();
});
</script>
</body>
</html>
>Kendo UI开发教程
本文转载自Kendo UI中文网
购买正版授权的朋友可以点击"咨询在线客服"哦~~~
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:JavaScript HTML5跨平台UI界面KendoUIHTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录慧都网发表评论登录


慧都网友 2016-09-27 09:32:50.000
0

教程介绍得非常详细,666666


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat