本系列主要是记录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. Js原生封装选项卡组件

    class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...

  2. bean 装配

    1.装配方式 (1)在xml进行显式装配 (2)在java中进行显式装配 (3)隐式的bean发现机制和自动装配 2.装配方式(3)实现 (1)创建bean /** * @component告诉spr ...

  3. Mysql 数据库日志与数据文件分开

    参考:https://blog.csdn.net/jiao_fuyou/article/details/78366621 myql默认配置情况下,二进制日志文件是保存在默认的数据目录 data 下,如 ...

  4. 第一次java程序设计作业

    通过JAVA语言的学习,使我对计算机语言有了更加深入的认识和理解.知道了许多JAVA语言与其他语言的区别和特性,及其在我们生活中所发挥的重要作用.最后用一句话表明在学习JAVA语言过程中的感受,那就是 ...

  5. java,优先队列的用法

    像C++语言一样,java中,也有包装好的优先队列类PriorityQueue. 用法如下(模板代码): 工作安排问题: 问题描述:设有n件工作分配给n个人,将工作i分配给第j个人所需的费用为cij. ...

  6. iphone上mitmproxy证书设置

    PC端安装mitmproxy并添加证书后,基本问题不大,都能正常运行起来 手机端iphone上下载安装mitmproxy证书: 1.手机和PC在同一个局域网中,设置wifi代理为PC端的ip,端口为m ...

  7. Oracle使用

    Oracle数据库首先必须在服务器端安装,安装完成后在DBCA中创建数据库,然后在Net Configuration Assistant中配置监听程序和本地Net服务名.然后安装本地Oracle客户端 ...

  8. react .net core 发布 Access-Control-Allow-Origin Cors

    本案例用IIS部署 1. 在react上先publish: npm run build 生成了build文件,在此文件里添加web.config,注意httpProtocol是用来跨域的. <? ...

  9. 转: Qt信号槽实现原理 清晰明了

    转: https://blog.csdn.net/perfectguyipeng/article/details/78082360 本文使用 ISO C++ 一步一步实现了一个极度简化的信号与槽的系统 ...

  10. 信用卡欺诈数据的分析-excel篇

    本篇文章为大家提供了数据集分析的思路和步骤,同时也分享了自己的经验. 一.背景 反欺诈是一项识别服务,是对交易诈骗.网络诈骗.电话诈骗.盗卡盗号等行为的一项风险识别.其核心是通过大数据的收集.分析和处 ...