準(zhǔn)備 Kendo UI 開(kāi)發(fā)環(huán)境

2018-08-12 21:28 更新

準(zhǔn)備

首先你需要從 Telerik 網(wǎng)站下載試用版開(kāi)發(fā)包,注意需要注冊(cè)后才能下載,或者從本站下載 (18M)

下載后直接解壓后包含下面幾個(gè)文件和目錄:

  • ./examples – 示例.
  • /js – minified 化后的 JavaScript 庫(kù).
  • /vsdoc JavaScript Intellisense 支持文件
  • /styles – minified 后的 CSS 及主題資源.
  • changelog.html – Kendo UI 發(fā)布文件.

如果你下載伺服器端支持(比如 ASP.NET,PHP 等)還可能包含

  • .wrappers 目錄,支持伺服器端 UI 組件的封裝。

本教程側(cè)重于直接使用 JavaScript ,伺服器端支持只是使用 PHP,Net 等伺服器端 API 生產(chǎn)這些客戶端代碼(主要是 UI 組件的配置),Kendo UI 應(yīng)用不需要這些伺服器端封裝就可以運(yùn)行。

這裡我們使用 Visual Studio 2012 IDE 作為開(kāi)發(fā)環(huán)境,你可以使用你自己熟悉的開(kāi)發(fā)工具,或者直接使用 NotePad 都可以開(kāi)發(fā)基于 Kendo UI 的 Web 應(yīng)用。

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

然后添加三個(gè) HTML 文檔用來(lái)測(cè)試。

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

Kendo UI Web

編寫(xiě)基于桌面系統(tǒng)的 Web 應(yīng)用,使用 KendoUI WEB Javascript 庫(kù),在 Html 的 Head 部分添加對(duì)應(yīng)的 CSS 和 JavaScrpt,這裡我們使用一個(gè) 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="https://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
        <script src="https://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/kendo.web.min.js"></script>
    </head>
    <body>
        <input id="datepicker" />
        <script>
            $(function () {
                $("#datepicker").kendoDatePicker();
            });
        </script>
    </body>
</html>

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

Kendo UI DataViz

如果需要開(kāi)發(fā)數(shù)據(jù)顯示控制項(xiàng)的 Web 頁(yè)面(比如 DataGrid,表格等),在頁(yè)面添加 DataViz 庫(kù)和 CSS 的應(yīng)用,如下例顯示一個(gè)儀表盤(pán):


<!doctype html>
<html>
    <head>
        <title>Kendo UI DataViz</title>
        <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
        <script src="https://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
        <script src="https://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/kendo.dataviz.min.js"></script>
    </head>
    <body>
        <div id="gauge"></div>
        <script>
            $(function () {
                $("#gauge").kendoRadialGauge();
            });
        </script>
    </body>
</html>

Kendo UI Mobile

最后,修改 mobile.html 測(cè)試一下移動(dòng) Web 應(yīng)用


<!doctype html>
<html>
    <head>
        <title>Kendo UI Mobile</title>
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <script src="https://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
        <script src="https://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/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>

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

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)