摘要：

　　前面介绍了一款非常不错的前端框架kendo-ui，如果你想阅读，请点这里。通过使用它一段时间，感觉是非常好用。下面就介绍一下如何使用它和开发自己的组件

引入：

　　只需要引进下面三个文件即可

　kendo.common.min.css  通用样式
　kendo.default.min.css 皮肤
　kendo.all.min.js      js文件
 <!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>

     </body>

 </html>

开发自己的组件：

第一步：继承基本组件

 (function($) {

     // shorten references to variables. this is better for uglification

     var kendo = window.kendo,

         ui = kendo.ui,

         Widget = ui.Widget

     var MyWidget = Widget.extend({

         // initialization code goes here

     });

 })(jQuery);

注意：

1、为了保护全局的命名空间，开发组件是在单独的函数中执行，确保$是jQuery

2、组件是继承基本组件的，所以组件名首字母大写

第二步：添加一个初始化的方法

 var MyWidget = Widget.extend({

     init: function(element, options) {

         // base call to initialize widget

         Widget.fn.init.call(this, element, options);

     }

 });

当这个组件初始化时，这个方法会被框架调用。两个参数，第一个是宿主元素，第二个是配置参数

第三步：添加配置参数

 var MyWidget = Widget.extend({

     init: function(element, options) {

         // base call to initialize widget

         Widget.fn.init.call(this, element, options);

     },

     options: {

         // the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget).

         // The jQuery plugin would be jQuery.fn.kendoMyWidget.

         name: "MyWidget",

         // other options go here

         ...

     }

 });

第四步：暴露组件

 kendo.ui.plugin(MyWidget);

下面是一个详细的列表组件:

 (function() {

     var kendo = window.kendo,

         ui = kendo.ui,

         Widget = ui.Widget,

     CHANGE = "change";

     var Repeater = Widget.extend({

         init: function(element, options) {

             var that = this;

             kendo.ui.Widget.fn.init.call(that, element, options);

             that.template = kendo.template(that.options.template || "<p><strong>#= data #</strong></p>");

             that._dataSource();

         },

         options: {

             name: "Repeater",

             autoBind: true,

             template: ""

         },

         refresh: function() {

             var that = this,

                 view = that.dataSource.view(),

                 html = kendo.render(that.template, view);

             that.element.html(html);

         },

         _dataSource: function() {

             var that = this;

             // returns the datasource OR creates one if using array or configuration object

             that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

             // bind to the change event to refresh the widget

             that.dataSource.bind(CHANGE, function() {

                 that.refresh();

             });

             if (that.options.autoBind) {

                 that.dataSource.fetch();

             }

         }

     });

     kendo.ui.plugin(Repeater);

 })(jQuery);

使用：

 <div id="repeater"></div>

 <script>

 $("#repeater").kendoRepeater({

     dataSource: [ "item1", "item2", "item3" ]

 });

 </script>

效果图：

kendo-ui的使用和开发自己的组件的更多相关文章

  1. 准备Kendo UI 开发环境

    准备 首先你需要从 Telerik 网站下载试用版开发包,注意需要注册后才能下载. 下载后直接解压后包含下面几个文件和目录: ./examples – 示例. /js – minified 化后的 J ...

  2. 关于Kendo UI 开发教程

    Kendo UI 开发教程 jQuery UI 是一套 JavaScript 函式库,提供抽象化.可自订主题的 GUI 控制项与动画效果.基于 jQuery JavaScript 函式库,可用来建构互 ...

  3. Python开发篇——基于React-Dropzone开发上传组件

    这次我要讲述的是在React-Flask框架上开发上传组件的技巧.我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架--React-Bootstrap.Ant Design.M ...

  4. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

  5. Kendo UI开发教程(27): 移动应用开发简介

    Kendo UI 支持开发Web应用,前面介绍的SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中.Kendo UI M ...

  6. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  7. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  8. 【Kendo UI系列开发使用笔记】01-简单介绍

    ps:接触telerik出品的kendo ui系列已经快有一年了,使用过程中也在不断踩坑填坑.这套UI用起来还是非常爽的,尤其asp.net mvc版的配合lambda表达式来配置参数非常流畅.这次对 ...

  9. Kendo UI 移动应用开发简介

    Kendo UI 移动应用开发简介 Kendo UI 支持开发 Web 应用,前面介绍的 SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS 开发移动是不是一个好的 ...

  10. Web UI开发推荐！Kendo UI for jQuery自定义小部件——使用MVVM

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. linux下调试core的命令

    在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时加上调试信息).使用gdb来查看core文件,可以指示出导致程序出错的代码所在文件和行数. 1.core文件的生成开 ...

  2. Freemarker-2.3.22 Demo - No04_条件判断

    package No04_条件判断; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream ...

  3. Windows10 64位 Python2.7 Matplotlib安装

    为了安装Matplotlib 百度了一大堆,也下载了一大堆安装包,结果还是报错ImportError: DLL load failed: %1 不是有效的 Win32 应用程序. 后来直接从官网看怎么 ...

  4. Spring教程索引

    Spring教程索引 2016-11-15 1 入门 1 概述.深入浅出Spring(一)Spring概述 2 体系结构 3 环境设置 4 Hello World 实例 5 IoC 容器   IoC容 ...

  5. rzsz安装【转】

    环境:CentOS 发生情况:需要安装工具:szrz 工具进行 windows 和linux传文件 安装方式:从网上其他教程找的所以就按照如下方式操作 1. 下载软件 rzsz-3.34.tar.gz ...

  6. asp.net 获取客户端IP

    一.名词 首先说一下接下来要讲到的一些名词. 在Web开发中,我们大多都习惯使用HTTP请求头中的某些属性来获取客户端的IP地址,常见的属性是REMOTE_ADDR.HTTP_VIA和HTTP_X_F ...

  7. C++ test的使用

    http://www.parasoft.com/jsp/trial_request.jsp?itemId=303 去下载,原来是个商业的测试软件,还要去购买,这个成本太大了.. http://down ...

  8. 常用PHP文件操作函数

    注:文件操作函数的行为受到 php.ini 中设置的影响. 当在 Unix 平台上规定路径时,正斜杠 (/) 用作目录分隔符.而在 Windows 平台上,正斜杠 (/) 和反斜杠 (\) 均可使用. ...

  9. kettle启动时候报a fatal exception has occurred

    本人刚接触ETL工具 Data Integration - Kettle ,下载了kettle6.0版本,但是在window +jdk1.7(32位)下启动报错, 使用SpoonDebug.bat写的 ...

  10. LIBSVM使用方法及参数设置 主要参考了一些博客以及自己使用经验。

    主要参考了一些博客以及自己使用经验.收集来觉得比较有用的. LIBSVM 数据格式需要---------------------- 决策属性  条件属性a  条件属性b  ... 2    1:7   ...