本系列主要是记录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. Xilinx Vivado的使用详细介绍（1）：创建工程、编写代码、行为仿真

    Xilinx Vivado的使用详细介绍(1):创建工程.编写代码.行为仿真 Author:zhangxianhe 新建工程 打开Vivado软件,直接在欢迎界面点击Create New Projec ...

  2. java枚举通俗实例解析

    1         枚举 1.1            枚举的作用 我们经常要定义一些常量值,例如日期(MONDAY,TUESDAY……)或者错误码等.可以将常量组织起来,统一进行管理.常量比较只是值 ...

  3. vue日历控件,自定义选择年月 选择年月日 选择年月日时 选择年月日时分，自定义日期范围

    下载地址:https://pan.baidu.com/s/1iEZl4kDkEg4ybwqc7aI7vQ 注:功能更加全面的日历控件请访问:https://www.cnblogs.com/mrzhu/ ...

  4. jacoco覆盖率工具测试及性能分析

    ant版本:https://ant.apache.org/bindownload.cgi jdk版本 注: ant 1.10    --->   jdk1.8 ant 1.9      ---& ...

  5. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  6. 思科模拟器PacketTracer7--利用一台交换机将两台pc划分到不同vlan下

    实验2—3 实验内容:将同一交换机下的两台pc划分到不同vlan中 实验工具:思科模拟器PacketTracer7 使用设备:一台交换机,两台PC 实验步骤: 一.配置网络拓扑图 注:1.连线可选择闪 ...

  7. W10激活

    1.首先,我们先查看一下Win10正式专业版系统的激活状态: 点击桌面左下角的“Windows”按钮,从打开的扩展面板中依次点击“设置”-“更新和安全”,并切换到“激活”选项卡,在此就可以查看到当前系 ...

  8. 每日算法---Two Sum

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  9. thrift之php，python使用TServerSocket并发 处理请求

    要求: 不适用nginx+fastcgi情况下,分布式系统之间如果通讯,如果不阻塞,能并发处理请求 环境: luman/laravel:5.5 php:7.2 thrift -version :Thr ...

  10. 1-TwoSum（简单）

    Description: Given an array of integers, return indices of the two numbers such that they add up to ...