首页 > 代码库 > 开发kendo-ui弹窗组件
开发kendo-ui弹窗组件
摘要：
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 buttons114 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 area122 var buttonsArea = document.createElement(‘div‘),123 $buttonsArea = $(buttonsArea);124 this.buttonsArea = buttonsArea;125 126 // Make buttons and set buttons‘ attributes127 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就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。
下载代码
开发kendo-ui弹窗组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。