摘要：

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

?

下載代碼

?

總結

以上是生活随笔為你收集整理的开发kendo-ui弹窗组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。