本系列主要是记录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. 【转】 glibc detected *** corrupted double-linked list:错误的原因有如下三种可能

    一个多线程的大程序运行的时候崩掉了,屏幕上打出这个:   *** glibc detected *** corrupted double-linked list: 0xb78381d8 *** 三个原 ...

  2. RobotFramework自动化测试框架-Selenium Web自动化(-)-Open Browser和Close Browser

    Selenium出来已经有很多年了,从最初的Selenium1到后来的Selenium2,也变得越来越成熟,而且也已经被很多公司广泛使用.Selenium发展的过程中,分了很多模块,这里我们主要介绍W ...

  3. android ----- 分享的连接在手机上打开App

    首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]">启动应用程序</a> 这一 ...

  4. 【XAF问题】如何判断这个对象的进出类型

    一.问题 1. 如何判断这个对象的进出类型 二.思路 第一次进过的时候,存个字段在对象的字段,例如已经过了就给他true,再回来就是false,再过去就true 三.方法 在 A_rfidperson ...

  5. spring RedisTemplate的使用(一)--xml配置或JavaConfig配置

    1.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="h ...

  6. 回文的范围——算法面试刷题2（for google），考察前缀和

    如果一个正整数的十进制表示(没有前导零)是一个回文字符串(一个前后读取相同的字符串),那么它就是回文.例如,数字5, 77, 363, 4884, 11111, 12121和349943都是回文. 如 ...

  7. smb 访问时 提示权限不够

    1. 确认 防火墙关闭和getenforce 为Permissive 状态. 关闭防火墙 service iptables stop 关闭  setenforce 0 2.windows 登录切换 身 ...

  8. java操作svn工具类SvnUtil

    直接上代码,工作中使用的版本,记录下. public class SvnUtil { private static Logger logger = Logger.getLogger(SvnUtil.c ...

  9. 【转】Oracle系列导航目录

    .Net程序员学用Oracle系列(1):导航目录 .Net程序员学用Oracle系列(2):准备测试环境 .Net程序员学用Oracle系列(3):数据库编程规范 .Net程序员学用Oracle系列 ...

  10. linux服务器用nginx做网站内页之间301的跳转方法

    例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...