kendo-ui的使用和开发自己的组件（思路清晰）
转自： http://www.itnose.net/detail/6114073.html
摘要：
摘要：
前面介绍了一款非常不错的前端框架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>
效果图：