摘要：
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就不需要這個了。同一個彈窗不能多次創建，可以先銷毀在創建。