开发kendo-ui弹窗组件

转自：http://www.itnose.net/detail/6157288.html

摘要：

　　kendo-ui中只是提供了windwo插件，并没有提供页内弹窗插件。现在分享项目中自己定制的基于window组件的弹窗插件，如果你的项目也是用的kendo-ui，只需要将组件代码引到项目中即可。
特点：

支持定时自动关闭弹窗

按钮自定义

支持最大化最小化



代码：

dialog.js

1 var dialog = kendo.ui.Window.extend({
2     // set options
3     options: {
4         name              : 'GDialog',    // widget name
5         onOk              : $.noop,
6         okText            : '确定',
7         cancelText        : '取消',
8         defaultButtons    : 'OK_CANCEL',  //'OK' || 'OK_CANCEL' || 'CANCEL' || 'NULL'
9         extraButtons      : [],           //[ { text:'ok', className: '', click:function(){} }]
10         appendTo  : 'body',
11         minWidth  : 400,
12         minHeight : 100,
13         resizable : false,
14         actions   : ['Close'],            // ['Minimize', 'Maximize', 'Close']
15         autohide  : false,
16         time      : 1000
17     },
18     // Init method
19     init: function(element, options){
20         var me = this;
21         // Call super.init
22         kendo.ui.Window.fn.init.call(this, element, options);
23
24         // Add buttons
25         var $buttonsArea = this._addButtons(element, options);
26
27         // Set styles
28         this.wrapper.addClass('k-dialog');
29         $buttonsArea.addClass('k-button-area');
30
31         // Set the dialog's position by default
32         if (!options || !options.position){ this.center(); }
33
34         // if the autohide is setted true that aftering a time auto hide the dialog. default is 1s.
35         if(this.options.autohide) {
36             setTimeout(function() {
37                 kendo.ui.Window.fn.close.call(me);
38             },this.options.time);
39         }
40     },
41     open: function(){
42         // Call super.open
43         kendo.ui.Window.fn.open.call(this);
44     },
45     minimize: function(){
46         // Call super.minimize
47         kendo.ui.Window.fn.minimize.call(this);
48
49         $(this.buttonsArea).hide();
50         this.wrapper.css('padding-bottom', '0');
51     },
52     restore: function(){
53         // Call super.restore
54         kendo.ui.Window.fn.restore.call(this);
55
56         $(this.buttonsArea).show();
57         this.wrapper.css('padding-bottom', '51px');
58     },
59     center: function(){
60
61         if (this.options.isMaximized){ return this; }
62
63         // Call super.center
64         kendo.ui.Window.fn.center.call(this);
65
66         var that           = this,
67             position       = that.options.position,
68             wrapper        = that.wrapper,
69             documentWindow = $(window),
70             scrollTop      = 0,
71             newTop;
72
73         if (!that.options.pinned){ scrollTop = documentWindow.scrollTop(); }
74
75         newTop = scrollTop + Math.max(0,
76                 (documentWindow.height() - wrapper.height() - 50 - parseInt(wrapper.css("paddingTop"), 10)) / 2);
77
78         wrapper.css({ top: newTop });
79
80         position.top = newTop;
81
82         return that;
83     },
84     _onDocumentResize: function(){
85         if (!this.options.isMaximized){ return; }
86
87         // Call super._onDocumentResize
88         kendo.ui.Window.fn._onDocumentResize.call(this);
89
90         this._fixWrapperHeight();
91     },
92     _fixWrapperHeight: function(){
93         var height = (this.wrapper.height() - 51).toString() + 'px';
94         this.wrapper.css('height', height);
95     },
96     // Add buttons to the dialog
97     _addButtons: function(element, options){
98
99         var that    = this,
100             buttons = this.options.extraButtons.slice(0);
101
102         var nullPattern    = /NULL/gi, okPattern = /OK/gi, cancelPattern = /CANCEL/gi,
103             defaultButtons = {
104                 buttonOk     : {text: that.options.okText,     className:'ok-btn'   , click:function(e){
105                     that.options.onOk.call(that, e);
106                     return false;
107                 }},
108                 buttonCancel : {text: that.options.cancelText, className:'close-btn', click:function(e){
109                     e.preventDefault(); that.close();
110                 }}
111             };
112
113         // Append default buttons
114         if (!nullPattern.test(this.options.defaultButtons)){
115             okPattern.test(this.options.defaultButtons) &&
116                buttons.unshift(defaultButtons.buttonOk);
117             cancelPattern.test(this.options.defaultButtons) &&
118                buttons.unshift(defaultButtons.buttonCancel);
119         }
120
121         // Make button area
122         var buttonsArea  = document.createElement('div'),
123             $buttonsArea = $(buttonsArea);
124         this.buttonsArea = buttonsArea;
125
126         // Make buttons and set buttons' attributes
127         for (var i = buttons.length - 1; i >= 0; --i){
128             var $aEl = $(document.createElement('a'));
129             /*eslint no-script-url: 0*/
130             $aEl.html(buttons[i].text)
131                 .addClass('k-dialog-button')
132                 .addClass(buttons[i].className)
133                 .attr({href:'javascript:;'})
134                 .on('click', buttons[i].click)
135                 .kendoButton();
136             $buttonsArea.append($aEl);
137         }
138
139         this.wrapper.append($buttonsArea);
140
141         return $buttonsArea;
142     }
143 });
144
145 kendo.ui.plugin(dialog);

dialog.html

1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5     <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css" />
6     <link rel="stylesheet" type="text/css" href="style/dialog.css" />
7 </head>
8 <body>
9     <script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
10     <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
11     <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
12     <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
13     <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script>
14     <div id="dialog"></div>
15     <script src="js/dialog.js"></script>
16     <script>
17         var dialog = $('#dialog').kendoGDialog({title:"弹窗"}).data('kendoGDialog');
18     </script>
19 </body>
20 </html>

附录：

属性：

	含义	类型	default	例子
content	弹出内容	string，function	宿主元素的内容	$("#dialog").kendoGDialog({ content: { url: "/userDetails", dataType: "json", template: "User name: #= data.username #" } });
iframe	是否已iframe方式显示弹窗	bool	FALSE
onOk	点击确定执行的事件	function		var dialog = $('#dialog').kendoGDialog({ onOk: function() { dialog.close(); } }).data('kendoGDialog');
okText	确定按钮文本	string	'确定'
cancelText	取消按钮文本	string	'取消'
defaultButtons	默认显示按钮	string（'OK' || 'OK_CANCEL' || 'CANCEL' || 'NULL'）	'OK_CANCEL'
extraButtons	自定义的按钮	array	空	var dialog = $('#dialog').kendoGDialog({ extraButtons: [{ text:'按钮', className: '', click:function(){ } }] }).data('kendoGDialog');
appendTo	将弹窗插入到	string	'body'
height	弹窗高度	number
width	弹窗宽度	number
minWidth	弹窗最小宽度	number	500
maxWidth	弹窗最大宽度	number
minHeight	弹窗最小高度	number	200
maxHeight	弹窗最大高度	number
visible	弹窗是否可见	bool	TRUE
position	弹窗位置	Object		$("#dialog").kendoGDialog({ position: { top: 100, left: 200 } })
resizable	重置弹窗大小	bool	TRUE
actions	弹窗工具组件	array（ "Close", "Refresh", "Minimize", and "Maximize" ）	['Close']
title	弹窗标题	string	""
autohide	自动关闭	bool	FALSE
time	自动关闭时间	number	1000(ms)
draggable	是否可以拖动	bool	TRUE
resize	当改变弹窗大小时触发事件	function
refresh	当内容加载完成或者点击刷新按钮内容加载完成时触发事件	function
open	打开弹窗触发事件	function
error	当异步加载内容出错时触发事件	function
dragstart	开始移动弹窗时触发事件	function
dragend	结束移动弹窗时触发事件	function
deactivate	当弹窗关闭结束之后执行事件	function
close	关闭弹窗时执行事件	function
activate	当弹窗打开之后执行的事件	function

方法：

方法	含义	例子dialog = $('#dialog').data('kendoGDialog')
open	打开弹窗	dialog.open();
center	设置弹窗居中	dialog.center();
close	关闭弹窗	dialog.close();
destroy	销毁弹窗	dialog.destroy();
refresh	刷新弹窗内容	dialog.refresh();
setOptions	设置弹窗参数	dialog.setOptions({ title: '标题' });
content	设置弹窗内容	dialog.content('弹窗内容');
maximize	最大化	dialog.maximize();
minimize	最小化	dialog.minimize();
title	弹窗标题	dialog.title();

注意：

工具栏的图片是我自己做的，制作了一个关闭按钮，刷新、最大化、最小化没有做。如果项目中引用了kendo-ui就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

下载代码