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

最新推荐文章于 2022-12-01 10:11:07 发布

chelen_jak

最新推荐文章于 2022-12-01 10:11:07 发布

阅读量2.1k

点赞数

分类专栏：基础知识 Kendo 赞实用插件

实用同时被 3 个专栏收录

738 篇文章 3 订阅

订阅专栏

205 篇文章 0 订阅

订阅专栏

基础知识

160 篇文章 0 订阅

订阅专栏

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

效果图：

chelen_jak

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kendo-ui的使用和开发自己的组件（思路清晰）

转自：http://www.itnose.net/detail/6114073.html摘要：　　前面介绍了一款非常不错的前端框架kendo-ui，如果你想阅读，请点这里。通过使用它一段时间，感觉是非常好用。下面就介绍一下如何使用它和开发自己的组件引入：　　只需要引进下面三个文件即可　kendo.common.min.css 通用样式　kendo.default.mi
复制链接

扫一扫