窗口名:
【页面内容框】
函数调用:
【命名空间】asyncbox.open( options, [window] );
参数配置:
--------------------------标识--------------------------- id [可选] (String)
└ 窗口 ID。
└ 设置后可防止重复弹出。如不设,为自动标识。获取不到时需设置指定 ID,用 asyncbox.close("窗口ID") 方法关闭。
--------------------------内容--------------------------- url (String)
└ 请求打开的页面路径。
- args [依赖 url] (String,object)
└ 发送到服务器的 url 参数。将自动转换为请求字符串格式。
└ 支持以下两种写法:
└ 1、args : 'id=100&name=asyncbox'。
└ 2、args : { id : 100, name : 'asyncbox' }
└ 以上两种最终转换为 url + args 即:'asyncbox.html?id=100&name=asyncbox'。
- data [可选] (*)
└ 接受任何类型对象、值,传递到窗口内子页面中。
- title [可选] (String)
└ 窗口标题。
--------------------------尺寸--------------------------- width (Number,String)
└ 宽度。如:传入数字 400 为窗口内容区域宽度,传入带 px 后缀字符串为窗口整体宽度。
└ 默认值:'auto'。
- height (Number,String)
└ 高度。如:传入数字 300 为窗口内容区域高度,传入带 px 后缀字符串为窗口整体高度。
└ 默认值:'auto'。
--------------------------坐标--------------------------- top [可选] (Number)
└ 相对 top 坐标。
- left [可选] (Number)
└ 相对 left 坐标。
- right [可选] (Number)
└ 相对 right 坐标。
- bottom [可选] (Number)
└ 相对 bottom 坐标。
--------------------------视觉--------------------------- cache [可选] (bool)
└ 缓存窗口在文档里(即不删除窗口,只是隐藏)。
└ 默认值:false。
- drag [可选] (bool)
└ 拖动窗口。
└ 默认值:true。
- timer [可选] (Number)
└ 定秒自动关闭窗口的秒数值。
└ 默认不自动关闭。
- float [可选] (bool)
└ IE下是否让窗口浮动在 ActiveX 控件上。
└ 默认:false。
- fixed [可选] (bool)
└ 固定窗口。
└ 默认值:false。
- flash [依赖 reset 项] (bool)
└ 动画,受全局配置影响。
└ 默认值:false。
- reset [可选] (bool)
└ 自动重设位置。
└ 默认值:false。
- modal [可选] (bool)
└ 伪模态层(即遮罩层)。一定程度上屏蔽用户对本窗口以外的操作。
└ 默认值:false。
- scroll [可选] (bool)
└ 窗口内部的滚动条。
└ 默认值:true。
--------------------------布局--------------------------- ctrlbar [可选] (options)
└ 控制栏。目前本版本只有一个右上角关闭按钮,如不需要该按钮,可以 ctrlbar : { close : false } 不显示
- buttons [可选] (options)
└ 窗口脚部按钮栏。
--------------------------事件--------------------------- callback function(action[,contentWindow[,returnValue]]){}
└ 回调函数(仅对 AsyncBox 的按钮有效)。该事件与 onbeforeunload 事件相似,均在窗口关闭之前执行。
└ 返回 3 个参数,顺序依次为:
└ 1、buttonResult 返回按钮的结果值。通过判断此值来确定被按下的按钮。
└ 2、contentWindow 返回内容窗口内 window 对象的引用。
└ 3、returnValue 返回值。
- onload [可选] function([contentWindow]){}
└ 窗口内容加载完毕后执行。
└ 返回 1 个参数
└ 1、contentWindow 返回内容窗口内 window 对象的引用。
- unload [可选] (function)
└ 窗口从文档中删除后执行。
注释:在窗口子页面中都会存在一个必须的 api 对象,便于在子页面中操作该窗口。
该对象声明为: var dialog = frameElement.api;
接下来就使用:
【属性】
dialog.data //得到窗口传递到子页面的数据。
dialog.opener //得到插件引用页的 window 对象,若 open(options,window) 方法第二个参数指定后,该值为指定值。
dialog.options //得到当前窗口所有配置项(只读),如:dialog.options.id。
dialog.returnValue //设置窗口返回值 与 callback 事件第三个参数搭配使用。
【方法】
dialog.join("窗口ID") //连接窗口,返回该窗口子页面中的 window 对象。
dialog.close() //在子页面中使用此方法关闭当前窗口。
AsyncBox
代码实例:
打开一个页面:
asyncbox.open({ url : 'asyncbox.html', width : 400, height : 300 });
打开一个带参数的页面:
asyncbox.open({ url : 'asyncbox.html', //把 url 和 参数分离开来, args 只是一种优雅的书写方式。 args : 'id=100&name=asyncbox', /*也可以这么写 args : { id:100, name:'asyncbox' },*/ width : 400, height : 300 });
用 data 参数传递任何数据类型到子页面中:
//如发生错位可设置 width、height。 asyncbox.open({ url : 'asyncbox.html', data : "可以传递任何数据类型到子页面中", width : 400, height : 300 });
asyncbox.html 页面中使用 dialog.data 得到,不懂 dialog.data 哪来的? 看上面注释↑
asyncbox.open(options,window) 第二个可选参数的使用:
//如发生错位可设置 width、height。 asyncbox.open({ url : 'asyncbox.html', width : 400, height : 300 },window); //也可以传递任何数据类型,但一般传 window 便于 dialog.opener 使用,常常用到 刷新"父页面" asyncbox.html 页面中根据指定值 刷新父页面 dialog.opener.loaction.href = dialog.opener.loaction.href
配置一个有“按钮栏”的窗口,同样演示 asyncbox 的按钮如何配置和使用:
asyncbox.open({ url : 'asyncbox.html', width : 400, height : 300, ctrlbar : { close : false // 窗口右上角的关闭按钮木有了 }, buttons : [{ value : '新的按钮', result : 'new_btn' }], callback : function(btnRes,cntWin,reVal){ // callback 返回的三个参数缩写,什么名字都可以,按顺序就行 //在这里判断按钮按下 if(btnRes == "new_btn"){ alert("根据 按钮的 result 判断 新的按钮 按下了") } } });
onload 和 unload 事件的使用:
//如需阻止窗口关闭,请在判断 action 值内加入 return false asyncbox.open({ url : 'asyncbox.html', width : 400, height : 300, onload : function(cntWin){ //页面加载完毕后,设置子页面中的文本框焦点,也可以操作其他 cntWin.document.getElementById("text_1").focus() }, unload : function(action){ alert("窗口从文档中删除后执行") } });
配置一个“阻止关闭”的窗口:
//如需阻止窗口关闭,请在判断 action 值内加入 return false asyncbox.open({ url : 'asyncbox.html', width : 400, height : 300, buttons : asyncbox.btn.OKCANCEL, //按钮栏配置请参考 “辅助函数” 中的 $.btn。 callback : function(action){ //嵌套使用 AsyncBox 中的 this 会改变,先存当前窗口的对象。 var t = this; //判断 action 值。 if(action == 'ok'){ asyncbox.confirm('数据已改变,需要保存吗?','确认框',function(){ //做了某些事情,然后关闭窗口。 asyncbox.close(t.id); }); return false; } } });
窗口关闭后不删除,而是“缓存”窗口到文档中:
//如需阻止窗口关闭,请在判断 action 值内加入 return false asyncbox.open({ url : 'asyncbox.html', cache : true, width : 400, height : 300, buttons : asyncbox.btn.OKCANCEL //按钮栏配置请参考 “辅助函数” 中的 asyncbox.btn。 });
callback 中第二个参数 contentWindow 的使用:
//如需阻止窗口关闭,请在判断 action 值内加入 return false asyncbox.open({ url : 'asyncbox.html', width : 400, height : 300, btnsbar : $.btn.OKCANCEL, //按钮栏配置请参考 “辅助函数” 中的 $.btn。 callback : function(btnRes,cntWin){ //判断 action 值。 if(action == 'ok'){ //调用了“asyncbox.html”页内的“fun()”函数。 cntWin.fun(); //得到"asyncbox.html"页内 ID 为 text_1 文本值。 cntWin.document.getElementById("text_1").value; //“CheckForm()”函数可以返回 true || false 如用于检查内容页文本框是否为空。 //返回 false 就刚好阻止窗口关闭。 return cntWin.CheckForm(); } } });
callback 中第三个参数 returnValue 的使用:
//如需阻止窗口关闭,请在判断 action 值内加入 return false asyncbox.open({ url : "asyncbox.html", width : 400, height : 300, buttons : [{ value : "拿返回值", result : "ok" }], callback : function(btnRes,cntWin,returnValue){ //判断 btnRes 值。 if(btnRes == 'ok'){ //returnValue 默认是没有值的,需要在 asyncbox.html 中设置。 alert(returnValue); } } }); //在 asyncbox.html 页面中设置 dialog.returnValue = "返回值" 后, // callback 就能拿到了 //目前不支持 ajax 的 success 赋值
提交表单数据到 asyncbox 窗口中:
//表单提交的页面与窗口弹出的页面需一致 js 代码: //提交表单到 asyncbox function ActionToAsyncBox(el){ //弹出空页面的窗口等待提交 asyncbox.open({ id : "toabc", url : "about:blank", width : 400, height : 300, onload : function(cntWin){ //窗口加载完毕后执行提交 var form = el.form, iframeName = cntWin.frameElement.name; form.action = "abc.html"; //表单的 target 指向 iframe 的 name form.target = iframeName; //提交表单 form.submit() // abc.html 这个页面不存在的 可以用 FF 看 提交页面的 url 会发现有参数 } }) return false }
HTML代码:
<form> <input name="username" type="text" value="wuxinxi007" /> <input name="password" type="text" value="123456" /> <input type="submit" value="提交到 asyncbox" onclick="return ActionToAsyncBox(this)" /> </form>
以上示例主要列出了比较特殊的配置,剩下的选项可以自己参考 API 进行尝试。