人妻六区,91香蕉网站,网友自拍第一页

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

轉帖|使用教程|編輯：龔雪|2016-09-27 09:16:51.000|閱讀 1764 次

概述：本文主要為大家介紹使用Kendo UI進行開發時，應如何設置開發環境。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

Kendo UI Web、Kendo UI DataViz、Kendo UI Mobile需要您從網站下載試用版開發包，注意需要注冊后才能下載，下載后直接解壓后包含下面幾個文件和目錄： /example

Kendo UI Web
Kendo UI DataViz
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 控件做為示例，完整代碼如下：

<!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>

如果能夠正確顯示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>