本系列主要是记录KendoUI的学习过程。

KendoUi的特点有以下特点：

1、 70+UI控件

控件有DataGrids,DropDowns,Menus和Buttons，还有一些商业的控件，比如Charts，电子表格，甘特图，线图，日程图，PivotGrid和地图。

2、漂亮主题

有较多的样式可以选择，可以不用写任何样式，可以使你的APP很优雅。通过一个简单样式创建工具就可以自定义样式。

3、任意屏幕

构建跨平台的网页应用，给任意尺寸的桌面程序和手机。所有内容完全无缝兼容grid布局框架，比如Bootstrap和Zurb Foundation。学习更多的KnedoUi for jquery。

4、易于学习 

  1. 良好的培训
  2. 支持在线和离线数据
  3. 支持Angular
  4. 支持导出Excel,paf,Png
  5. 支持所有的浏览器
  6. 无限的产品支持

数据包介绍：

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>

KendoUi 学习笔记一的更多相关文章

  1. kendo-ui学习笔记——题记

    1.Kendo UI基于最新技术HTML5.CSS3和JavaScript标准设计开发.2.官方网址:http://www.kendoui.com/3.API网上查阅英文版网址:http://docs ...

  2. kendo-ui学习笔记（一）

    1.top.jsp: <script src="<%=path%>/kendoui/js/jquery.min.js"></script> &l ...

  3. KendoUi 学习笔记(二) Grid

    Kendo.ui.Grid Kendo Ui Grid控件,继承至Widget. 一.构造       allowCopy    Boolen|Object  (默认:false) 当他设置true, ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  6. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  7. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  8. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  9. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. web优化及web安全攻防学习总结

    web优化 前端:(高性能网站建设进阶指南) 使用gzip压缩(节省服务器的 网络带宽) 减少http请求( 减少DNS请求所耗费的时间. 减少服务器压力. 减少http请求头) 使用cdn(用户可以 ...

  2. 遗传算法（GA）

    来自:https://blog.csdn.net/u010451580/article/details/51178225 遗传算法是模仿生物进化机制的随机全局搜索和优化方法.借鉴达尔文进化论和孟德尔的 ...

  3. 谈谈传统BIO网络编程模型的局限性与NIO

    先来看看我们的server端: 创建一个serversocket,进行监听,每来一个客户端,就启动一个新启动为其服务: private void createListenSocket() { //如果 ...

  4. Project Euler 345: Matrix Sum

    题目 思路: 将问题转化成最小费用流 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #incl ...

  5. linux日常使用指令总结

    linux 日常指令总结(ubuntu): ls -lha 所有文件及权限 df -h 系统磁盘空间 du -sh 当前目录大小 du -ah --max-depth=1 显示目录下所有的文件和文件夹 ...

  6. pip安装软件或模块时提示cannot import name 'main'

    旧的pip文件内容如下: from pip import main if __name__ == '__main__': sys.exit(main()) 修改后的文件内容: from pip imp ...

  7. background——背景属性

    一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...

  8. pc端结合canvas实现简单签名功能

    需求:业务员做提交时要签名... 代码不多简单易懂,直接看代码 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. python运用turtle 画出汉诺塔搬运过程

    python运用turtle 画出汉诺塔搬运过程 1.打开 IDLE 点击File-New File 新建立一个py文件 2.向py文件中输入如下代码 import turtle class Stac ...

  10. 《Python量化交易教程》第一部分新手入门 第1天：谁来给我讲讲Python？

    一.量化投资视频学习课程 二.Python手把手教学 第1天:谁来给我讲讲Python? PS: 1.注意使用方法,这个以后都有大用 2.注意符号的使用方式 3.尽量用英文表达 4.本日学习内容以及其 ...