转自:
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>
效果图: