摘要：

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

引入：

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

　kendo.common.min.css  通用样式 　kendo.default.min.css 皮肤 　kendo.all.min.js      js文件

1  2  3      4         Welcome to Kendo UI! 5         
      6         
      7          8          9     10     11         17     18

开发自己的组件：

第一步：继承基本组件

1 (function($) { 2     // shorten references to variables. this is better for uglification 3     var kendo = window.kendo, 4         ui = kendo.ui, 5         Widget = ui.Widget 6   7     var MyWidget = Widget.extend({ 8         // initialization code goes here 9     });10  11 })(jQuery);

注意：

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

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

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

1 var MyWidget = Widget.extend({2  3     init: function(element, options) {4  5         // base call to initialize widget6         Widget.fn.init.call(this, element, options);7  8     }9 });

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

第三步：添加配置参数

1 var MyWidget = Widget.extend({ 2   3     init: function(element, options) { 4   5         // base call to initialize widget 6         Widget.fn.init.call(this, element, options); 7     }, 8   9     options: {10         // the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget).11         // The jQuery plugin would be jQuery.fn.kendoMyWidget.12         name: "MyWidget",13         // other options go here14         ...15     }16  17 });

第四步：暴露组件

1 kendo.ui.plugin(MyWidget);

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

1 (function() { 2     var kendo = window.kendo, 3         ui = kendo.ui, 4         Widget = ui.Widget, 5  6     CHANGE = "change"; 7  8     var Repeater = Widget.extend({ 9         init: function(element, options) {10             var that = this;11 12             kendo.ui.Widget.fn.init.call(that, element, options);13             that.template = kendo.template(that.options.template || "#= data #
");14 15             that._dataSource();16         },17         options: {18             name: "Repeater",19             autoBind: true,20             template: ""21         },22         refresh: function() {23             var that = this,24                 view = that.dataSource.view(),25                 html = kendo.render(that.template, view);26 27             that.element.html(html);28         },29         _dataSource: function() {30             var that = this;31             // returns the datasource OR creates one if using array or configuration object32 33             that.dataSource = kendo.data.DataSource.create(that.options.dataSource);34 35             // bind to the change event to refresh the widget36             that.dataSource.bind(CHANGE, function() {37                 that.refresh();38             });39 40             if (that.options.autoBind) {41                 that.dataSource.fetch();42             }43         }44     });45 46     kendo.ui.plugin(Repeater);47 48 })(jQuery);

使用：