-
窗口名：
-
【页面内容框】
-
函数调用：
-
【命名空间】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 进行尝试。