下面就可以使用 Keudo UI 來開發(fā) Web 應(yīng)用了。首先使用 Visual Studio 創(chuàng)建一個空的 Web Site ，然后及 Kendo UI 的 js 和 styles 目錄拷貝到這個新創(chuàng)建的 Website 應(yīng)用中。你如果直接使用 Notepad 作為開發(fā)工具，可以創(chuàng)建一個開發(fā)目錄，然后把 js,和 Styles 目錄拷貝過來也是一樣的。使用 Visual Studio 的一個好處是支持 Intelisense ，幫助編寫 JavaScript 代碼，這是就需要把 vsdoc 的內(nèi)容拷貝到 js 目錄下。

然后添加三個 HTML 文檔用來測試。

index.html Web 應(yīng)用測試頁
dataviz.html 數(shù)據(jù)顯示測試頁
mobile.html 移動應(yīng)用測試頁

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/8.jpg" alt="" />

Kendo UI Web

編寫基于桌面系統(tǒng)的 Web 應(yīng)用，使用 KendoUI WEB Javascript 庫，在 Html 的 Head 部分添加對應(yīng)的 CSS 和 JavaScrpt，這裡我們使用一個 DataPicker 控制項(xiàng)做為示例，完整代碼如下：


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

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/9.jpg" alt="" />

如果能夠正確顯示 dataPicker 控制項(xiàng)，就表示 Kendo UI Web 開發(fā)環(huán)境已經(jīng)正確設(shè)置好了。

Kendo UI DataViz

如果需要開發(fā)數(shù)據(jù)顯示控制項(xiàng)的 Web 頁面（比如 DataGrid，表格等），在頁面添加 DataViz 庫和 CSS 的應(yīng)用，如下例顯示一個儀表盤：


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

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/10.jpg" alt="" />

Kendo UI Mobile

最后，修改 mobile.html　測試一下移動 Web 應(yīng)用


<!doctype html>
<html>
    <head>
        <title>Kendo UI Mobile</title>
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
    </head>
    <body>
        <div data-role="view" data-title="View" id="index">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
            <ul data-role="listview">
              <li>Item 1</li>
              <li>Item 2</li>
            </ul>
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a data-icon="home" href="#index">Home</a>
                    <a data-icon="settings" href="#settings">Settings</a>
                </div>
            </footer>
        </div>
        <script>
            var app = new kendo.mobile.Application();
        </script>
    </body>
</html>

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/11.jpg" alt="" />

這樣就設(shè)置好了 Kendo UI 的開發(fā)環(huán)境。

上一篇：使用 Kendo UI 庫實(shí)現(xiàn)對象的繼承下一篇：Kendo MVVM 數(shù)據(jù)綁定(五) Events

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

準(zhǔn)備

Kendo UI Web

Kendo UI DataViz

Kendo UI Mobile