本系列主要是記錄KendoUI的學習過程。
KendoUi的特點有以下特點：
1、 70+UI控件
控件有DataGrids,DropDowns,Menus和Buttons，還有一些商業的控件，比如Charts，電子表格，甘特圖，線圖，日程圖，PivotGrid和地圖。
2、漂亮主題
有較多的樣式可以選擇，可以不用寫任何樣式，可以使你的APP很優雅。通過一個簡單樣式創建工具就可以自定義樣式。
3、任意屏幕
構建跨平台的網頁應用，給任意尺寸的桌面程序和手機。所有內容完全無縫兼容grid布局框架，比如Bootstrap和Zurb Foundation。學習更多的KnedoUi for jquery。
4、易於學習
- 良好的培訓
- 支持在線和離線數據
- 支持Angular
- 支持導出Excel,paf,Png
- 支持所有的瀏覽器
- 無限的產品支持
數據包介紹：
1、/apptemplates 這個文件夾包含脫機啟動模板。盡管都是些靜態html文件，但是建議通過web server 而不是通過文件系統。后者的方法會破壞ajax 數據請求。
2、/examples 包含快速啟動的demo文件。盡管都是些靜態html文件，但是建議通過web server 而不是通過文件系統。后者的方法會破壞ajax 數據請求。
3、/js 包含壓縮過的js文件。
4、/src 這個文件夾包含所有源代碼文件，但是他們不提供給實驗用戶。
5、/styles 這個是有壓縮過的css文件和樣式圖片。這個文件夾包含較少的文件，可以通過編譯器，坐落再第一層文件夾在 styles/floder:styles/web/和styles/mobile/. 移動端的css不提供給實驗用戶。
6、/wrappers 包含服務端包裝，for asp.net MVC
7、changelog.html 提供kendo ui 釋放版本。
添加CSS和Javascript 引用：
使用kendo Ui 在你的項目中，包含引用 Javascript和Css文件。
第一步：提取/js 和 /styles 目錄 從項目包中 和復制 他們到你的web application 根目錄。
第二步：包含kendo ui JavaScript 和css 文件 在你的html 文檔的head中，確認common css文件已經注冊在他們這些css之前。
例子如下：
<!DOCTYPE html> <html> <head> <title>Welcome to Kendo UI!</title> <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. --> <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" /> <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. --> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. --> <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" /> <!-- jQuery JavaScript --> <script src="js/jquery.min.js"></script> <!-- Kendo UI combined JavaScript --> <script src="js/kendo.all.min.js"></script> </head> <body> Hello World! </body> </html>
第三步：初始化控件
下面的例子是初始化時間控件。
<!-- HTML element from which the DatePicker would be initialized --> <input id="datepicker" /> <script> $(function() { // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin $("#datepicker").kendoDatePicker(); }); </script>
下面是完整的例子初始化時間選擇控件
<!DOCTYPE html> <html> <head> <title>Welcome to Kendo UI!</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.all.min.js"></script> </head> <body> <input id="datepicker" /> <script> $(function() { $("#datepicker").kendoDatePicker(); }); </script> </body> </html>
補充說明：
1、關於樣式問題，kendo ui 支持主題。
//默認主題 <link href="~/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />
//bootstrap主題
<link href="~/Content/KendoUI/kendo.bootstrap.min.css" rel="stylesheet" />
2、本地語言
<script src="~/Scripts/KendoUI/kendo.culture.zh-CN.min.js"></script> <script type="text/javascript">
//需要聲明，使用簡體中文 kendo.culture("zh-CN"); </script>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - Kendo</title> <link href="~/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
//默認主題 @*<link href="~/Content/KendoUI/kendo.default.min.css" rel="stylesheet" />*@
//bootstrap主題 <link href="~/Content/KendoUI/kendo.bootstrap.min.css" rel="stylesheet" /> </head> <body> @RenderBody() <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/KendoUI/kendo.all.min.js"></script>
//中文補丁 <script src="~/Scripts/KendoUI/kendo.culture.zh-CN.min.js"></script> <script type="text/javascript">
//需要聲明，使用簡體中文 kendo.culture("zh-CN"); </script> @RenderSection("scripts", required: false) </body> </html>