摘要：

　　前面介绍了一款非常不错的前端框架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. mini filter driver sql server

    https://blogs.msdn.microsoft.com/sql_pfe_blog/2013/04/23/identifying-the-cause-of-sql-server-io-bott ...

  2. 新手MySQL工程师必备命令速查手册

    MySQL的基本操作可以包括两个方面:MySQL常用语句如高频率使用的增删改查(CRUD)语句和MySQL高级功能,如存储过程.触发器.事务处理等.而这两个方面又可以细分如下: 1.MySQL常用语句 ...

  3. python（31） enumerate 的用法

    例子一: b = "abcd" kv_dict = {} pre = 1234 for i, v in enumerate(b): kv_dict['%s-%d.jpg' %(pr ...

  4. C# 简单Tcp通信demo

    Client 代码 private void btnSend_Click(object sender, EventArgs e) { TcpClient tcpClient = new TcpClie ...

  5. quartz 实现调度任务 SchedulerManager

    package cn.com.do1.component.common.util; import org.quartz.*; import org.quartz.impl.StdSchedulerFa ...

  6. poj1564-Sum It Up(经典DFS)

    给出一个n,k,再给出的n个数中,输出所有的可能使几个数的和等于k Sample Input 4 6 4 3 2 2 1 15 3 2 1 1400 12 50 50 50 50 50 50 25 2 ...

  7. 基于jQuery商品分类选择提交表单代码

    分享一款基于jQuery商品分类选择提交表单代码.这是一款基于jQuery实现的商品信息选择列表表单提交代码. 在线预览   源码下载 实现的代码: <div class="yList ...

  8. Sketch Up常见问题

    墙上开门洞用铅笔在墙上画好矩形(2m*1m)->用推拉(P)工具双击左键

  9. 【WPF】XAML实现按钮背景图片的点击切换

    原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样.想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色.背景图切换. 需 ...

  10. 【分区助手】如何扩大C盘容量？

    问题:C盘容量太小,想通过缩小其他盘(比如本例的F盘)来扩大C盘. 工具:分区助手 步骤: 1.下好分区助手后打开(该软件建议装在C盘),选择左侧的[扩大分区导向]. 2.选择下面那个,要先缩小F盘扩 ...