摘要：

　　前面介绍了一款非常不错的前端框架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. canvas.drawBitmap(bitmap, src, dst, paint)

    // GameView.drawImage(canvas, mBitDestTop, miDTX, mBitQQ.getHeight(), mBitDestTop.getWidth(), mBitDe ...

  2. js修改input的type属性问题（兼容所有浏览器，主要用于密码类的默认有提示文字的效果）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. [转]Understanding Weak References

    原文地址:https://weblogs.java.net/blog/enicholas/archive/2006/05/understanding_w.html 推荐另一篇文章:http://www ...

  4. sqlserver 若字段定义的类型为datetime

    sqlserver 若字段定义的类型为datetime,插入为''(空),那么会默认值为1900-01-01 00:00:00.000 解决 插入 NULL 或者程序判断

  5. lambda续集——2

    隐式捕获: 出了显式列出我们希望使用的来自函数的变量外,还可以让编译器根据lambda体中的代码来推断我们要使用哪些变量.为了指示编译器推断捕获列表,应在捕获列表中写一个&或=.&告诉 ...

  6. OCILIB开源的C/C++ Oracle驱动

    OCILIB是一个开源的.跨平台的Oracle驱动,可以高效的操作Oracle数据库. OCILIB库: - 提供丰富的.全特性的.容易使用的API - 运行在所有的Oracle平台 - 使用标准的I ...

  7. centos6.5中的cron计划任务配置方法

    1.#crontab -u <-l, -r, -e> -u指定一个用户-l列出某个用户的任务计划-r删除某个用户的任务-e编辑某个用户的任务 2. cron文件语法与写法 可用cronta ...

  8. C++14尝鲜：Generic Lambdas（泛型lambda）

    所谓泛型lambda.就是在形參声明中使用auto类型指示说明符的lambda. 比方 auto lambda = [](auto x, auto y) {return x + y;}; 依据C++1 ...

  9. 路径重写，适用于laravel，yii

    <IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews </IfModule& ...

  10. java并发编程（）阻塞方法与中断方法

    看完这篇,我感觉我对java多线程又懵逼了. 线程可能会阻塞或暂停执行,原因有多种: 等待I/O操作结束 等待获得一个锁 等待从Thread.sleep方法中醒来 等待另一个线程计算的结果 当线程阻塞 ...