kendo-ui的使用和开发自己的组件
摘要：
前面介绍了一款非常不错的前端框架kendo-ui，如果你想阅读，请点这里。通过使用它一段时间，感觉是非常好用。下面就介绍一下如何使用它和开发自己的组件
引入：
只需要引进下面三个文件即可
kendo.common.min.css 通用样式
kendo.default.min.css 皮肤
kendo.all.min.js js文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Welcome to Kendo UI!</title> 5 <link href="styles/kendo.common.min.css" rel="stylesheet" /> 6 <link href="styles/kendo.default.min.css" rel="stylesheet" /> 7 <script src="js/jquery.min.js"></script> 8 <script src="js/kendo.all.min.js"></script> 9 </head> 10 <body> 11 17 </body> 18 </html>
开发自己的组件：
第一步：继承基本组件
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 widget 6 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 here 14 ... 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 || "<p><strong>#= data #</strong></p>"); 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 object 32 33 that.dataSource = kendo.data.DataSource.create(that.options.dataSource); 34 35 // bind to the change event to refresh the widget 36 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);
使用：
1 <div id="repeater"></div> 2 <script> 3 $("#repeater").kendoRepeater({ 4 dataSource: [ "item1", "item2", "item3" ] 5 }); 6 </script>
效果图：
