asyncbox open

• 窗口名：

• 【页面内容框】

• 函数调用：

• 【命名空间】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 代码实例：

打开一个页面：

1 2 3 4 5

asyncbox.open({ 　　　url : 'asyncbox.html', 　　　width : 400, 　　　height : 300 　　});

打开一个带参数的页面：

1 2 3 4 5 6 7

asyncbox.open({ 　　　url : 'asyncbox.html',      //把 url 和 参数分离开来， args 只是一种优雅的书写方式。　　　args : 'id=100&name=asyncbox',     /*也可以这么写       args : {          id:100,          name:'asyncbox'      },*/　　　width : 400, 　　　height : 300　});

用 data 参数传递任何数据类型到子页面中：

1 2 3 4 5 6 7 8

//如发生错位可设置 width、height。　   asyncbox.open({ 　　　url : 'asyncbox.html',       data : "可以传递任何数据类型到子页面中", 　　　width : 400, 　　　height : 300 　　});

1	asyncbox.html 页面中使用 dialog.data 得到，不懂 dialog.data 哪来的？ 看上面注释↑

asyncbox.open(options,window) 第二个可选参数的使用：

1 2 3 4 5 6 7 8 9

//如发生错位可设置 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 的按钮如何配置和使用：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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 事件的使用：

1 2 3 4 5 6 7 8 9 10 11 12 13

//如需阻止窗口关闭，请在判断 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("窗口从文档中删除后执行") 　　　} 　});

配置一个“阻止关闭”的窗口：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//如需阻止窗口关闭，请在判断 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; 　　　　　} 　　　} 　});

窗口关闭后不删除，而是“缓存”窗口到文档中：

1 2 3 4 5 6 7

//如需阻止窗口关闭，请在判断 action 值内加入 return false　 asyncbox.open({ 　　　url : 'asyncbox.html', 　　　cache : true, 　　　width : 400, 　　　height : 300, 　　　buttons : asyncbox.btn.OKCANCEL //按钮栏配置请参考 “辅助函数” 中的 asyncbox.btn。　});

callback 中第二个参数 contentWindow 的使用：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//如需阻止窗口关闭，请在判断 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 的使用：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//如需阻止窗口关闭，请在判断 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 窗口中：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//表单提交的页面与窗口弹出的页面需一致           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代码：

1 2 3 4 5 6

<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 进行尝试。