JQuery UI Dialog 是主页面和子页面交互的常用控件,经常碰到的问题是:参数传递,事件交互和页面元素的清除回收。本文使用MVC4,JQuery,Html开发做以示例。
1. Dialog打开的代码示例如下:
2. Dialog 页面打开时的运行顺序
此处是onDocumentReady的执行方法。
3) 执行load方法后的回调函数
3. 主页面传递参数给Dialog
利用Element元素的data方法传入参数,可以是各种对象封装类型的参数。
4. Dialog 页面如何访问传入参数
//获取主页面传入给Dialog的参数
5. Dialog 访问主页面的hidden、div 或 方法
1) 获取主页面hidden 或 div
getMessengerInstance()是主页面上实现的方法,可以在Dialog页面脚本上调用。
6. 事件交互
主页面上数据变化,需要控制子页面Dialog的显示。
1) 主页面上的事件定义
此处定义了onMessageRecieved 的事件,其激活方法如下:
主页面收到消息后,激活订阅事件。self.WebMessenger.onMessageRecieved用于获取订阅的事件对象,trigger方法是触发订阅事件执行。
2) Dialog 对主页面事件的订阅
在dialog子页面定制自己的关闭按钮,onclick事件中调用父页面的div元素的对话框属性的close方法,写法是:window.parent.$('#divChatDialog').dialog('close') .
1. Dialog打开的代码示例如下:
2. Dialog 页面打开时的运行顺序
1) Mvc 服务端解析页面:
生成页面元素,上述示例中load方法中的页面地址,就是服务端要解析的页面;
2) Html 页面初始化:
脚本代码:
此处是onDocumentReady的执行方法。
3) 执行load方法后的回调函数
在回调函数里,真正进行Dialog参数的初始化,Dialog的页面属性设置和Dialog的open。
4) 直接打开客户端静态页面
如果没有经过MVC控制器,直接打开客户端静态页面,则执行onDocumentReady()方法,后期需要注意的是没有了window.parent属性,而是直接访问window属性;因为还是在当前窗口里呈现页面,并没有新的window对象产生。
3. 主页面传递参数给Dialog
利用Element元素的data方法传入参数,可以是各种对象封装类型的参数。
4. Dialog 页面如何访问传入参数
//获取主页面传入给Dialog的参数
5. Dialog 访问主页面的hidden、div 或 方法
1) 获取主页面hidden 或 div
//从主页面hidden元素读取
2) 获取主页面方法
getMessengerInstance()是主页面上实现的方法,可以在Dialog页面脚本上调用。
6. 事件交互
主页面上数据变化,需要控制子页面Dialog的显示。
1) 主页面上的事件定义
此处定义了onMessageRecieved 的事件,其激活方法如下:
主页面收到消息后,激活订阅事件。self.WebMessenger.onMessageRecieved用于获取订阅的事件对象,trigger方法是触发订阅事件执行。
2) Dialog 对主页面事件的订阅
在页面初始化是先获取到主页面上声明的Messenger等对象,然后进行事件的订阅。messageRecievedHandler 是子页面Dialog上实现的事件处理函数。
3)取消事件订阅
在Dailog关闭前,取消对主页面事件的订阅, beforeClose是在dialogOptions中定义的。
7. Dialog 子页面的关闭
在dialog子页面定制自己的关闭按钮,onclick事件中调用父页面的div元素的对话框属性的close方法,写法是:window.parent.$('#divChatDialog').dialog('close') .
8. Dialog容器元素的清除或销毁
调用destroy 销毁容器元素,但是初始div依然存在;调用remove,则删除初始div元素。