Kendo UI開發教程：準備開發環境

Kendo UI Web、Kendo UI DataViz、Kendo 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 Web

編寫基於桌面系統的Web應用，使用KendoUI WEB Javascript庫，在Html的Head部分添加對應的CSS和JavaScrpt，這裏咱們使用一個DataPicker 控件作爲示例，完整代碼以下：

1 2 3 4 5 6 7 8 9 10 11 12 13

<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>     <input id="「datepicker」"> <script> $(function () { $(「#datepicker」).kendoDatePicker(); }); </script>

若是可以正確顯示dataPicker控件，就表示Kendo UI Web開發環境已經正確設置好了。

Kendo UI DataViz

若是須要開發數據顯示控件的Web頁面（好比DataGrid，表格等），在頁面添加DataViz庫和CSS的應用，以下例顯示一個儀表盤：

1 2 3 4 5 6 7 8 9 10 11 12

<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>     <div id="「gauge」"></div> <script> $(function () { $(「#gauge」).kendoRadialGauge(); }); </script>

本文轉載自Kendo UI中文網