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 id="bottomBar" style="position:absolute;bottom:10px;right:60px;">
    <input type="button" id="close" style="right:10px;margin:10px;" value="關閉" οnclick="window.parent.$('#divChatDialog').dialog('close');" />
    <input type="button" id="sendmessage" style="right:10px;margin:10px;" 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元素。