您的位置：首页 > 产品设计 > UI/UE

Kendo UI开发教程(2):准备Kendo UI开发环境

2014-06-14 22:45 405 查看
首先你需要从Telerik网站下载试用版开发包，注意需要注册后才能下载，或者从本站下载 （18M）

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

/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 Web

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

1
<!doctype
html>
2
<
html
>
3
<
head
>
4
<
title
>Kendo
UI Web</
title
>
5
<
link
 
href
=
"styles/kendo.common.min.css"
 
rel
=
"stylesheet"
 
/>
6
<
link
 
href
=
"styles/kendo.default.min.css"
 
rel
=
"stylesheet"
 
/>
7
<
script
 
src
=
"js/jquery.min.js"
></
script
>
8
<
script
 
src
=
"js/kendo.web.min.js"
></
script
>
9
</
head
>
10
<
body
>
11
<
input
 
id
=
"datepicker"
 
/>
12
<
script
>
13
$(function
() {
14
$("#datepicker").kendoDatePicker();
15
});
16
</
script
>
17
</
body
>
18
</
html
>




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

Kendo UI DataViz
如果需要开发数据显示控件的Web页面（比如DataGrid，表格等），在页面添加DataViz库和CSS的应用，如下例显示一个仪表盘：

1
<!doctype
html>
2
<
html
>
3
<
head
>
4
<
title
>Kendo
UI DataViz</
title
>
5
<
link
 
href
=
"styles/kendo.dataviz.min.css"
 
rel
=
"stylesheet"
 
/>
6
<
script
 
src
=
"js/jquery.min.js"
></
script
>
7
<
script
 
src
=
"js/kendo.dataviz.min.js"
></
script
>
8
</
head
>
9
<
body
>
10
<
div
 
id
=
"gauge"
></
div
>
11
<
script
>
12
$(function
() {
13
$("#gauge").kendoRadialGauge();
14
});
15
</
script
>
16
</
body
>
17
</
html
>





Kendo UI Mobile
最后，修改mobile.html　测试一下移动Web应用，

1
<!doctype
html>
2
<
html
>
3
<
head
>
4
<
title
>Kendo
UI Mobile</
title
>
5
<
link
 
href
=
"styles/kendo.mobile.all.min.css"
 
rel
=
"stylesheet"
/>
6
<
script
 
src
=
"js/jquery.min.js"
></
script
>
7
<
script
 
src
=
"js/kendo.mobile.min.js"
></
script
>
8
</
head
>
9
<
body
>
10
<
div
 
data-role
=
"view"
 
data-title
=
"View"
 
id
=
"index"
>
11
<
header
 
data-role
=
"header"
>
12
<
div
 
data-role
=
"navbar"
>
13
<
span
 
data-role
=
"view-title"
></
span
>
14
</
div
>
15
</
header
>
16
<
ul
 
data-role
=
"listview"
>
17
  
<
li
>Item
1</
li
>
18
  
<
li
>Item
2</
li
>
19
</
ul
>
20
<
footer
 
data-role
=
"footer"
>
21
<
div
 
data-role
=
"tabstrip"
>
22
<
a
 
data-icon
=
"home"
 
href
=
"#index"
>Home</
a
>
23
<
a
 
data-icon
=
"settings"
href
=
"#settings"
>Settings</
a
>
24
</
div
>
25
</
footer
>
26
</
div
>
27
<
script
>
28
var
app = new kendo.mobile.Application();
29
</
script
>
30
</
body
>
31
</
html
>




这样就设置好了Kendo UI的开发环境。

转载地址：http://blog.csdn.net/mapdigit/article/details/9091359
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                kendoUI
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航