准备 Kendo UI 开发环境.pdf

准备 Kendo UI 开发环境 准备 ⾸先你需要从 Telerik ⽹站下载试⽤版开发包，注意需要注册后才能下载，或者从本 站下载 （18M ） 下载后直接解 后包含下⾯⼏个⽂件和⽬录： ./examples – ⽰例. /j s – minified 化后的 JavaScript 库. /vsdoc JavaScript Intellisense ⽀持⽂件 /styles – minified 后的 CSS 及主题资源. c angelog . tml – Kendo UI 发布⽂件. 如果你下载伺服器端⽀持 （⽐如 ASP .NET ，PHP 等）还可能包含 .wrappers ⽬录，⽀持伺服器端 UI 组件的封装。 本教程侧重于直接使⽤ JavaScript ，伺服器端⽀持只是使⽤ PHP ,Net 等伺服器端 API ⽣产这些客户端代码 （主要是 UI 组件的配置），Kendo UI 应⽤不需要这些伺服器端 封装就可以运⾏。 这裡我们使⽤ Visual Studio 20 12 IDE 作为开发环境，你可以使⽤你⾃⼰熟悉的开发⼯ 具，或者直接使⽤ NotePad 都可以开发基于 Kendo UI 的 Web 应⽤。 下⾯就可以使⽤ Keudo UI 来开发 Web 应⽤了。⾸先使⽤ Visual Studio 创建⼀个空的 Web Site ，然后及 Kendo UI 的 j s 和 styles ⽬录拷贝到这个新创建的 Website 应⽤中。 你如果直接使⽤ Notepad 作为开发⼯具，可以创建⼀个开发⽬录，然后把 j s,和 Styles ⽬录拷贝过来也是⼀样的。使⽤ Visual Studio 的⼀个好处是⽀持 Intelisense ，帮助编 写 JavaScript 代码，这是就需要把 vsdoc 的内容拷贝到 j s ⽬录下。 然后添加三个 HTML ⽂档⽤来测试。 index . tml Web 应⽤测试页 dataviz . tml 数据显⽰测试页 mobile . tml 移动应⽤测试页 Kendo UI Web 编写基于桌⾯系统的 Web 应⽤，使⽤ KendoUI WEB Javascript 库，在 Html 的 Head 部分添加对应的 CSS 和 JavaScrpt ，这裡我们使⽤⼀个 DataPicker 控制项做为⽰例，完 整代码如下： !doctype html html head titleKendo UI Web/title link href=styles/mon.min.css rel=stylesheet link href=styles/kendo.default.min.css rel=stylesheet script src=http ///attachments/image/wk/ script src=http ///attachments/image/wk/ /head body input id=datepicker / script $(function () { $(#datepicker).kendoDatePicker(); }); /script /body /html 如果能够正确显⽰ dataPicker 控制项，就表⽰ Kendo UI Web 开发环境已经正确设置好 了。 Kendo UI DataViz 如果需要开发数据显⽰控制项的 Web 页⾯ （⽐如 DataGrid ，表格等），在页⾯添加 DataViz 库和 CSS 的应⽤，如下例显⽰⼀个仪表盘： !doctype html html head titleKendo UI DataViz/title link href=styles/kendo.dataviz.min.css rel=stylesheet script src=http ///attachments/image/wk/ script src=http ///attachments