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');
});
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="关闭" onclick="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元素。