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

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

1. Dialog打开的代码示例如下：var chatDialog = $("#divChatDialog").load("../im/ChatDialog", function () { var dialogOptions = { title: "To:" + who, width: 600, height: 500, modal: true, autoOpen: false, beforeClose: function (evt, ui) { //从Messenger主页面获取messenger对象 var messenger = window.parent.getMessengerInstance(); //取消消息接收事件 messenger.onMessageRecieved.unsubscribe(WebChatDialog.messageRecievedHandler); } }; var dialogExtendOptions = { "maximize": true, "minimize": true, "dblclick": "maximize" || false, "titlebar": "" || false }; chatDialog.dialog(dialogOptions).dialogExtend(dialogExtendOptions); chatDialog.data("who", who).dialog('open'); });

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

2. Dialog 页面打开时的运行顺序1) Mvc 服务端解析页面：

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

2) Html 页面初始化：脚本代码：

<script type="text/javascript"> $(function () { $("#MyChatSplitter").splitter({ type: "h", sizeTop: true, /* use height set in stylesheet */ accessKey: "P", cookie: false }); $("#message").focus(); WebChatDialog.initChatContentUI(); }); </script>此处是onDocumentReady的执行方法。

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

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

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

var filterHtmlPage = divFilterContainer.load("/Common/Content/filterdialog.html", function () { var dialogOptions = { title: '多列过滤', width: 450, height: 500, position: 'center', modal: false, resizable: true, autoOpen: false, close: function (event, ui) { $(this).dialog("destroy"); $(this).remove(); } }; filterHtmlPage .dialog(dialogOptions) .dialog('open'); });3. 主页面传递参数给Dialog

chatDialog.data("who", who).dialog('open');利用Element元素的data方法传入参数，可以是各种对象封装类型的参数。

4. Dialog 页面如何访问传入参数//获取主页面传入给Dialog的参数

var who = window.parent.$("#divChatDialog").data("who");5. Dialog 访问主页面的hidden、div 或 方法1) 获取主页面hidden 或 div

//从主页面hidden元素读取

var currentUser = window.parent.$("#hdnCurrentUserName").val();2) 获取主页面方法

//从Messenger主页面获取messenger对象 var messenger = window.parent.getMessengerInstance();getMessengerInstance()是主页面上实现的方法，可以在Dialog页面脚本上调用。

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

1) 主页面上的事件定义$.extend(true, window, { "WebMessenger": { //method "initUserConnection": initUserConnection, "sendMessage": sendMessage, "displayNewMessage": displayNewMessage, "onMessageRecieved": new im4.Event() } });

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

function recievedNewMessage(message) { var msgRecievedEvent = self.WebMessenger.onMessageRecieved; trigger(msgRecievedEvent, { "message": message }); }主页面收到消息后，激活订阅事件。self.WebMessenger.onMessageRecieved用于获取订阅的事件对象，trigger方法是触发订阅事件执行。

function trigger(evt, args, e) { e = e || new im4.EventData(); args = args || {}; args.messenger = self; return evt.notify(args, e, self); }2) Dialog 对主页面事件的订阅

//初始化聊天界面 function initChatContentUI() { //从Messenger主页面读取当前登录用户 var currentUser = window.parent.$("#hdnCurrentUserName").val(); //从Messenger主页面获取messenger对象 var messenger = window.parent.getMessengerInstance(); //注册消息接收事件 messenger.onMessageRecieved.subscribe(messageRecievedHandler); }在页面初始化是先获取到主页面上声明的Messenger等对象，然后进行事件的订阅。messageRecievedHandler 是子页面Dialog上实现的事件处理函数。

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

beforeClose: function (evt, ui) { //从Messenger主页面获取messenger对象 var messenger = window.parent.getMessengerInstance(); //取消消息接收事件 messenger.onMessageRecieved.unsubscribe(WebChatDialog.messageRecievedHandler); }7. Dialog 子页面的关闭

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

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

var dialogOptions = { title: "新消息", width: 140, height: 180, position: ['right', 'bottom'], autoOpen: false, close: function (event, ui) { //销毁容器元素，但是初始Div存在 $(this).dialog("destroy"); // 删除初始Div $(this).remove(); } };调用destroy 销毁容器元素，但是初始div依然存在；调用remove，则删除初始div元素。

猜你在找