摘要：

　　前面介绍了一款非常不错的前端框架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 双显卡问题。。。

    bumblebee的作用是禁用nvidia独立显卡,需要使用独显时,使用”optirun 程序名“手动开启nvidia来运行需要加速的程序,如optirun vmware. 打开N卡设置: optir ...

  2. 李洪强iOS开发之-sql数据库的使用

    一,创建工程 二: 导入头文件 三:导入 四: 数据库增删改查 //因为是结构体类型,所以用assign //1.创建数据库(保存路径) @property(nonatomic,assign)sqli ...

  3. Python中if __name__ == '__main__':作用

    #hello.pydef sayHello(): str="hello" print(str); if__name__=="__main__": print ( ...

  4. 【Java】Callable,Runnable比较及用法

    1.Runnable和Callable的区别 (1) Callable规定的方法是 call(), Runnable规定的方法是 run(). (2) Callable的任务执行后可返回值,而 Run ...

  5. Redis Keys 命令 - 查找所有符合给定模式( pattern)的 key

    Redis Keys 命令用于查找所有符合给定模式 pattern 的 key .. 语法 redis KEYS 命令基本语法如下: redis 127.0.0.1:6379> KEYS PAT ...

  6. binutils工具集之---ar

    1.如果要将多个.o文件生成一个库文件,则存在两种类型的库,一种是静态库,在linux里面后缀是.a,另一种是动态库,后缀为.so. 当可执行程序要与静态库进行链接时,所用到的库中的函数和数据会被拷贝 ...

  7. uva10160(dfs+状态压缩)

    题意:给出n个点,以及m条边,这些边代表着这些点相连,修一个电力站,若在某一点修一个站,那么与这个点相连的点都可以通电,问所有的点都通电的话至少要修多少个电力站........ 思路:最多给出的是35 ...

  8. dp之分组背包hdu3535（推荐）

    题意:有0,1,2三种任务,0任务中的任务至少得完成一件,1中的任务最多完成1件,2中的任务随便做.每一个任务最多只能做一次 .n代表有n组任务,t代表有t分钟,m代表这组任务有m个子任务,s代表这m ...

  9. 1U是什么意思

    U(unit的缩写)是服务器尺寸的单位规定的尺寸是服务器的宽度和高度,48.26cm=19英寸,高度4.445cm的倍数. 所谓“1U的PC服务器”,就是外形满足EIA规格.厚度为4.445cm的产品 ...

  10. 使用 LocalReport 对象进行打印

    添加引用   从“项目”菜单中,选择“添加引用”.将显示“添加引用”对话框. 从“.NET”选项卡上显示的列表框中,选择 Winforms 和 Drawing 组件. 添加代码 应打开 Program ...