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 吧!
1 2 3 |
<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 語法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
執行後的結果
結論
今天就簡單介紹基本的 KendoUI 的使用,想了解更多範例可以到官方 Demo 站台去看看,之後會在介紹如何結合 Web Api 來當做資料來源產生UI 囉!
六月 6th, 2014 - 08:39
這套軟體我也滿喜歡,
因為我們是公家機關,無法直接透過網路採購
請問您知道台灣是否有代理商可提供技術支援或教育訓練。