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 页面初始化：

脚本代码：