2三月/121

好用輕巧的新 UI framework - Kendo UI

前言

去年（2011）12月知名的 .Net 元件開發公司 Telerik 推出了一套以 jQuery 為基礎加上 HTML5 和 CSS3 的 UI Framework - Kendo UI，再我試用過之後就愛上它啦！我想要的基本元素都包含了，而且也不像 extjs 那樣的龐大跟複雜，學習起來也會比較輕鬆一點，所以還蠻推薦的囉！

說明

在 Visual Studio 中要使用 Kendo UI 也相當的容易，只需要透過 NuGet 就可以囉！

先隨便開個預設 MVC 專案，之後在 NuGet 搜尋 KendoUIWeb 第一個就是了

安裝之後會把基本的佈景和 JavaScript 加入，它加入的都是 min 版的，如果需要原始未壓縮過的版本可以到官方網站下載。這邊有個比較不喜歡的點是它建立的目錄是以版本編號來命名，未來要更新的時候會比較不方便一點。

先來個簡單的使用範例，先在 _Layout.cshtml 掛上 css 和 js 吧！

    <link href="@Url.Content("~/Content/2011.3.1129/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/2011.3.1129/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/2011.3.1129/kendo.all.min.js")" type="text/javascript"></script>

然後在 Index.cshtml 加入以下的 HTML 和 JS 語法

<div id="example" class="k-content">
    <div id="background">
        <div id="calendar">
        </div>
    </div>
    <script>
        $(document).ready(function () {
            // 建立 kendoCalendar
            $("#calendar").kendoCalendar();
        });
    </script>
    <style scoped>
        #background
        {
            width: 254px;
            height: 250px;
            margin: 30px auto;
            padding: 69px 0 0 11px;
        }
        #calendar
        {
            width: 241px;
        }
    </style>
</div>

</div>

$(document).ready(function () {

// 建立 kendoCalendar

$("#calendar").kendoCalendar();

});

</script>

#background

{

width: 254px;

height: 250px;

margin: 30px auto;

padding: 69px 0 0 11px;

}

#calendar

{

width: 241px;

}

</style>

</div>

執行後的結果

結論

今天就簡單介紹基本的 KendoUI 的使用，想了解更多範例可以到官方 Demo 站台去看看，之後會在介紹如何結合 Web Api 來當做資料來源產生UI 囉！

參考資料

Kendo UI

標籤： extjs, jQuery, Kendo UI, Nuget, Visual Studio 回覆此文章

回覆 (1) 引用 (0) ( 訂閱此篇文章的回覆 )

Roy
六月 6th, 2014 - 08:39

這套軟體我也滿喜歡，
因為我們是公家機關，無法直接透過網路採購
請問您知道台灣是否有代理商可提供技術支援或教育訓練。

黯雲回應：
這部份資訊我倒是不太清楚，就我所知應該是沒有

( 回覆 )

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

Coding 之路，不由分說 .Net,MVC,jQuery

好用輕巧的新 UI framework - Kendo UI

前言

說明

結論

參考資料

Leave a comment 取消回覆

文章彙整

文章分類

標籤

鏈結

近期文章

近期迴響

網站資訊

授權聲明