开发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 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:"Username:#=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弹窗组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度地图经纬度距离计算
- 下一篇： 微信服务商AppID账号与商户号配置和查