1、使用O2OA平台封裝好對象o2.DL的open方法建立彈出層,傳入options參數建構彈出框内容、按鈕等元素
實作效果:
對象源代碼位置:o2server\o2web\source\o2_core\o2\xDesktop\Dialog.js,
該對象繼承至o2.widget.Dialog,源代碼位置:o2server\o2web\source\o2_core\o2\widget\Dialog.js
實作代碼如下:
var dialog = o2.DL.open({
"style" : "o2",
"title": "彈出框标題",
"width": "400",
"height" : "200",
"isMax": false,
"isClose": true,
"isResize": true,
"isMove": true,
"isTitle": true,
"offset": {"x":-200, "y": -100},
"mask": true,
"content": new Element("div"),
"container": this.form.getApp().content,
"duration": 200,
"buttonList": [
{
"text": "确定",
"action": function(){
var result = {"key":"value"};
if (callback) callback.apply(this, [result]);
dialog.close();
}.bind(this)
},
{
"text": "取消",
"action": function(){
dialog.close();
}.bind(this)
}
],
"onQueryClose": function(){
console.log("-onQueryClose-");
}.bind(this),
"onPostClose": function(){
console.log("-onPostClose-");
}.bind(this),
"onQueryLoad":function(){
console.log("-onQueryLoad-");
},
"onPostLoad": function(){
console.log("-onPostLoad-");
new Element("div",{text:"這是内容區域"}).inject(this.content);
// ...code...
},
"onQueryShow": function(){
console.log("-onQueryshow-");
},
"onPostShow": function(){
console.log("-onPostShow-");
}.bind(this)
})
2、主要參數說明
1)、style:彈出框使用的樣式,預設是default,系統内置一些樣式,比如:flat,o2,chartd等,對應樣式檔案位置路勁:o2server\o2web\source\o2_core\o2\widget\$Dialog,使用者也可以自己增加自定義樣式風格,對應檔案及結構參考已有樣式風格。
2)、title:彈出框頭部标題,在isTitle參數為true時有效。
3)、width:彈出框寬度。 預設值:300
4)、height:彈出框高度。 預設值:150
5)、isMax:标題欄是否有最大化按鈕,相對應有還原按鈕,預設值:false
6)、isClose:标題欄是否有關閉按鈕。預設值:false
7)、isResize:彈出框大小是否可調整。預設值:true
8)、isMove:彈出框是否可移動。預設值:true
9)、isTitle:是否顯示标題欄。預設值:true
10)、offset:彈出框相對預設x軸y軸位置
11)、mark:是否需要遮罩層。預設值:true
12)、content:彈出框層的容器。
13)、container:彈出框層dom對象需要插入頁面html内元素的位置,預設插入到body中。
14)、duration:動畫顯示彈出框效果時間。預設值:200
15)、buttonList:定義底部按鈕,比如“确認”,“關閉”按鈕等,數組清單。text:按鈕顯示名稱,action: 按鈕對應的點選事件
16)、onQueryClose:關閉彈出框前事件
17)、onPostClose:關閉彈出框後事件
18)、onQueryLoad:彈出框載入前事件
19)、onPostLoad:彈出框載入後事件
20)、onQueryShow:彈出框顯示前事件
21)、onPostShow:彈出框顯示後事件
3、其他注意事項及說明
1)、調用彈出框對象後各事件執行先手順序 onQueryLoad-->onPostLoad-->onQueryShow-->onPostShow
2)、彈出框傳值問題,通過apply方法,在關閉彈出框後把值通過回調方法傳到外部調用的對象中。
3)、除了以上列出的一些常用參數及方法外,可以檢視widget\Dialog.js源代碼檔案中其他内置的參數及方法。
比如setContentSize(),設定居中,reCenter()重新設定居中位置等方法。
4)、可以自定義一個dialog類設定繼承widget.dialog重寫内置方法,滿足特殊的業務要求
(轉自公衆号:浙江蘭德網絡)