前面介绍了一款非常不错的前端框架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 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 || "<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 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);使用：
1 <div id="repeater"></div>2 <script>3 $("#repeater").kendoRepeater({4 dataSource: [ "item1", "item2", "item3" ]5 });6 </script>效果图：
新闻热点
疑难解答
