您的位置：首页 > 产品设计 > UI/UE

kendo-ui的使用和开发自己的组件（思路清晰）

2015-11-12 13:22 731 查看

转自：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>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航