摘要：

　　前面介绍了一款非常不错的前端框架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. Ribbon重试机制与Hystrix熔断机制的配置问题1

    Ribbon超时与Hystrix超时问题,为了确保Ribbon重试的时候不被熔断,我们就需要让Hystrix的超时时间大于Ribbon的超时时间,否则Hystrix命令超时后,该命令直接熔断,重试机制 ...

  2. [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图

    关于如何移植SDL2.0到安卓上面来参考我的上一篇文章:[原]零基础学习SDL开发之移植SDL2.0到Android 在一篇文章我们主要使用SDL2.0来加载一张BMP图来渲染显示. 博主的开发环境: ...

  3. Extjs combox的异步加载

    很多朋友用 extjs  很多时候都要用到combo 而异步加载是用的最多的 今天我就举一个例子 了解combo的异步加载 Ext.onReady(function () { Ext.BLANK_IM ...

  4. 百度BAE 平台PHP对Mongodb的连接

    <?php /*请替换为你自己的数据库名(可从管理中心查看到)*/ $dbname = 'XgmsRXDEYIDGmQFCjaZl'; /*从环境变量里取host,port,user,pwd*/ ...

  5. java 关于同步异步的理解

    经常看到介绍 ArrayList 和HashMap是异步,Vector和HashTable是同步,这里同步是线程安全的,异步不是线程安全的,举例说明: 当创建一个Vector对象时候, Vector ...

  6. linux下getrlimit与sysconf函数

    #include <stdio.h> #include <sys/time.h> #include <sys/resource.h> int main(int ar ...

  7. C 程序的存储空间记录

    一直以来,我们只是单纯的去运行执行 C 程序,并没有关心这个可执行文件里面包含着什么东西. 参考UNIX 环境高级编程 7.6,记录C程序的存储空间布局. C程序由 正文段,初始化数据段,非初始化数据 ...

  8. HTML——颜色代码

  9. iOS开发小技巧--富文本字典集合中的Key都是OC中的常量字符串

  10. php 删除指定文件 glob，unlink

    我用最简单的语句写了一个php删除指定文件 因为一直越级挑战thinkphp,所以突然面对php有点无所适从了... 首先,php的运行机制,是一个语法就搞定了,还是非要用数据库,还是post什么的. ...