本系列主要是记录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的使用详细介绍（5）：调用用户自定义封装的IP核

    Zedboard OLED Display Controller IP v1 介绍 Author:zhangxianhe 本文档提供了快速添加,连接和使用ZedboardOLED v1.0 IP内核的 ...

  2. node中redis重连

    项目node中用到redis ,做了的moudle,但是有个问题,两台redis,一台挂了,redis能自动切换,我的项目却不会自动重连: 查了资料,redis本身是实现了重连机制啊,为什么不自动重连 ...

  3. 金蝶K3常用数据表

    金蝶K3WISE常用数据表 K3Wise 14.2 清空密码update t_User set FSID=') F ", ,P T #8 *P!D &D 80!N &@ &l ...

  4. mybatis 动态sql和参数

    mybatis 动态sql 名词解析 OGNL表达式 OGNL,全称为Object-Graph Navigation Language,它是一个功能强大的表达式语言,用来获取和设置Java对象的属性, ...

  5. 用node+webpack+vue新建vue项目步骤

    1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...

  6. ROM、RAM、CPU、CACHE、FLASH的区别

    内存一般采用半导体存储单元,包括随机存储器(RAM),只读存储器(ROM),以及高速缓存(CACHE).只不过因为RAM是其中最重要的存储器,所以通常所说的内存即指电脑系统中的RAM. RAM要求每时 ...

  7. BUAAOO-First-Summary

    目录 homework & class & trainning : 两次上机.三次作业.四周课堂 code analysis & review : 为什么我没有bug 黑盒测试 ...

  8. C++ 中缀转后缀表达式并求值

    //中缀转后缀 #include<iostream> #include<stack> using namespace std; int prio(char x){ ; ; ; ...

  9. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  10. 你所误解的微信公众号开发、以及微信公众号网页授权、接收url跳转参数等问题

    前言:有一星期没跟新博客了,最近太忙.项目赶进度就没把时间花在博客上:今天来说说所谓的微信公众号开发和填坑记录: 微信公众号:运行在微信终端的应用 (对于开发者来说比较爽的你只需考虑兼容微信浏览器,因 ...