JQuery UI Dialog 参数传递及事件交互技术

JQuery UI Dialog 是主页面和子页面交互的常用控件，经常碰到的问题是：参数传递，事件交互和页面元素的清除回收。本文使用MVC4,JQuery,Html开发做以示例。


1. Dialog打开的代码示例如下：

[javascript] view plain copy

1. var chatDialog = $("#divChatDialog").load("../im/ChatDialog", function () {  
2.     var dialogOptions = {  
3.         title: "To:" + who,  
4.         width: 600,  
5.         height: 500,  
6.         modal: true,  
7.         autoOpen: false,  
8.         beforeClose: function (evt, ui) {  
9.             //从Messenger主页面获取messenger对象  
10.             var messenger = window.parent.getMessengerInstance();  
11.             //取消消息接收事件  
12.             messenger.onMessageRecieved.unsubscribe(WebChatDialog.messageRecievedHandler);  
13.         }  
14.     };  
15.   
16.     var dialogExtendOptions = {  
17.         "maximize": true,  
18.         "minimize": true,  
19.         "dblclick": "maximize" || false,  
20.         "titlebar": "" || false  
21.     };  
22.     chatDialog.dialog(dialogOptions).dialogExtend(dialogExtendOptions);  
23.     chatDialog.data("who", who).dialog('open');  
24. });  

示例中用到了DialogExtend扩展插件，dialog的打开方式没有大的变化，只是增加了样式，最大化，最小化的便捷设置。

2. Dialog 页面打开时的运行顺序

1) Mvc 服务端解析页面：

生成页面元素，上述示例中load方法中的页面地址，就是服务端要解析的页面；

2) Html 页面初始化：

脚本代码：

[javascript] view plain copy

1. <script type="text/javascript">  
2.     $(function () {  
3.         $("#MyChatSplitter").splitter({  
4.             type: "h",  
5.             sizeTop: true, /* use height set in stylesheet */  
6.             accessKey: "P",  
7.             cookie: false  
8.         });  
9.         $("#message").focus();  
10.   
11.   
12.         WebChatDialog.initChatContentUI();  
13.     });  
14. </script>  

此处是onDocumentReady的执行方法。

3) 执行load方法后的回调函数

在回调函数里，真正进行Dialog参数的初始化，Dialog的页面属性设置和Dialog的open。

4) 直接打开客户端静态页面

如果没有经过MVC控制器，直接打开客户端静态页面，则执行onDocumentReady()方法，后期需要注意的是没有了window.parent属性，而是直接访问window属性；因为还是在当前窗口里呈现页面，并没有新的window对象产生。

[javascript] view plain copy

1. var filterHtmlPage = divFilterContainer.load("/Common/Content/filterdialog.html",  
2.     function () {  
3.         var dialogOptions = {  
4.             title: '多列过滤',  
5.             width: 450,  
6.             height: 500,  
7.             position: 'center',  
8.             modal: false,  
9.             resizable: true,  
10.             autoOpen: false,  
11.             close: function (event, ui) {  
12.                 $(this).dialog("destroy");  
13.                 $(this).remove();  
14.             }  
15.         };  
16.   
17.         filterHtmlPage  
18.             .dialog(dialogOptions)  
19.             .dialog('open');  
20. });  

3. 主页面传递参数给Dialog

[javascript] view plain copy

1. chatDialog.data("who", who).dialog('open');  

利用Element元素的data方法传入参数，可以是各种对象封装类型的参数。

4. Dialog 页面如何访问传入参数

//获取主页面传入给Dialog的参数

[javascript] view plain copy

1. var who = window.parent.$("#divChatDialog").data("who");  

5. Dialog 访问主页面的hidden、div 或 方法

1) 获取主页面hidden 或 div

//从主页面hidden元素读取

[javascript] view plain copy

1. var currentUser = window.parent.$("#hdnCurrentUserName").val();  

2) 获取主页面方法

[javascript] view plain copy

1. //从Messenger主页面获取messenger对象  
2. var messenger = window.parent.getMessengerInstance();  

getMessengerInstance()是主页面上实现的方法，可以在Dialog页面脚本上调用。

6. 事件交互
主页面上数据变化，需要控制子页面Dialog的显示。
1) 主页面上的事件定义

[javascript] view plain copy

1. $.extend(true, window, {  
2.     "WebMessenger": {  
3.         //method  
4.         "initUserConnection": initUserConnection,  
5.         "sendMessage": sendMessage,  
6.         "displayNewMessage": displayNewMessage,  
7.         "onMessageRecieved": new im4.Event()  
8.     }  
9. });  

此处定义了onMessageRecieved 的事件，其激活方法如下：

[javascript] view plain copy

1. function recievedNewMessage(message) {  
2.     var msgRecievedEvent = self.WebMessenger.onMessageRecieved;  
3.     trigger(msgRecievedEvent, { "message": message });  
4. }  

主页面收到消息后，激活订阅事件。self.WebMessenger.onMessageRecieved用于获取订阅的事件对象，trigger方法是触发订阅事件执行。

[javascript] view plain copy

1. function trigger(evt, args, e) {  
2.     e = e || new im4.EventData();  
3.     args = args || {};  
4.     args.messenger = self;  
5.     return evt.notify(args, e, self);  
6. }  

2) Dialog 对主页面事件的订阅

[javascript] view plain copy

1. //初始化聊天界面  
2. function initChatContentUI() {  
3.     //从Messenger主页面读取当前登录用户  
4.     var currentUser = window.parent.$("#hdnCurrentUserName").val();  
5.   
6.   
7.     //从Messenger主页面获取messenger对象  
8.     var messenger = window.parent.getMessengerInstance();  
9.   
10.   
11.     //注册消息接收事件  
12.     messenger.onMessageRecieved.subscribe(messageRecievedHandler);  
13. }  

在页面初始化是先获取到主页面上声明的Messenger等对象，然后进行事件的订阅。messageRecievedHandler 是子页面Dialog上实现的事件处理函数。

3）取消事件订阅

在Dailog关闭前，取消对主页面事件的订阅, beforeClose是在dialogOptions中定义的。

[javascript] view plain copy

1. beforeClose: function (evt, ui) {  
2.     //从Messenger主页面获取messenger对象  
3.     var messenger = window.parent.getMessengerInstance();  
4.     //取消消息接收事件  
5.     messenger.onMessageRecieved.unsubscribe(WebChatDialog.messageRecievedHandler);  
6. }  

7. Dialog 子页面的关闭

[html] view plain copy

1. <div id="bottomBar" style="position:absolute;bottom:10px;right:60px;">  
2.     <input type="button" id="close" style="right:10px;margin:10px;" value="关闭" onclick="window.parent.$('#divChatDialog').dialog('close');" />  
3.     <input type="button" id="sendmessage" style="right:10px;margin:10px;" value="发送"/>  
4. </div>  

在dialog子页面定制自己的关闭按钮，onclick事件中调用父页面的div元素的对话框属性的close方法，写法是：window.parent.$('#divChatDialog').dialog('close') .

8. Dialog容器元素的清除或销毁

[javascript] view plain copy

1. var dialogOptions = {  
2.     title: "新消息",  
3.     width: 140,  
4.     height: 180,  
5.     position: ['right', 'bottom'],  
6.     autoOpen: false,  
7.     close: function (event, ui) {  
8.         //销毁容器元素，但是初始Div存在  
9.         $(this).dialog("destroy");  
10.         // 删除初始Div  
11.         $(this).remove();  
12.     }  
13. };  

调用destroy 销毁容器元素，但是初始div依然存在；调用remove，则删除初始div元素。