关于asyncbox插件open方法的简单使用
萧晓博
最近在一个很久之前的项目上添加新的内容，项目原负责人在项目中使用了jquery和asyncbox这个插件。而新的需求需要使用到一个带有输入框的弹窗。为了项目的一致性，也为了减少兼容的调试工作量，决定继续使用asyncbox。
遇到的问题一：asyncbox1.4.5版本和1.5beta版本是存在一些不同之处。比如：与1.4.5版本不同，在1.5版本中，将open方法中的html单独分离出来，作为一个单独的方法使用。
在开发中，我要实现的功能是，获取弹窗里面输入框输入的内容。第一次尝试，使用html方法，参数title 、 content 以及 callback，发现当在callback中使用jquery的方法获取不到输入框中的内容，初步推测，可能是回调机制的问题。于是转换思路。第二次尝试，使用open方法，参数url、width、height、buttons、callback，此处注意，callback方法中的opener参数能够获取到弹出框中希望得到的内容。
问题解决。
下面是一些代码：
main.html
<span style="white-space:pre"> </span>html代码...<span style="white-space:pre"> </span><span style="white-space:pre"> </span>触发条件...<span style="white-space:pre"> </span>popup.open({url:"xxx.html",
<span style="white-space:pre"> </span>width:800,
<span style="white-space:pre"> </span>height:100,
<span style="white-space:pre"> </span>buttons : asyncbox.btn.OKCANCEL,
<span style="white-space:pre"> </span>callback : function(action,opener){
<span style="white-space:pre"> </span>var name = opener.document.getElementById("name").value;
}
});<span style="white-space:pre"> </span>html代码...
xxx.html
<!DOCTYPE html>
<html>
<span style="white-space:pre"> </span><head>
<span style="white-space:pre"> </span><title>测试</title>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<span style="white-space:pre"> </span></head>
<span style="white-space:pre"> </span><body style="padding: 5px 1px; background: none;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1">
<tr>
<th>name：</th>
<td><input type="text" class=input size="35" name="name" id="name" placeholder="请输入" /> </td>
</tr>
</table>
<span style="white-space:pre"> </span></body>
</html>
</pre><span style="white-space:pre"> </span>main.html里面的js代码将会获取到 xxx.html代码中id=name的input内容<p><span style="white-space:pre"></span></p><p><span style="white-space:pre"><span style="white-space:pre"> </span><span style="color:#ff0000;">AsyncBox文档中是这样整理的：</span></span></p><p><span style="white-space:pre"><span style="white-space:pre"> </span></span><pre name="code" class="html">窗口名：
【页面内容框】
函数调用：
【命名空间】asyncbox.open( options, [window] );
<span style="color:#33ccff;">
参数配置：
--------------------------标识--------------------------
- 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)
└ 窗口从文档中删除后执行。</span>
callback <span style="color:#ff0000;">中第二个参数</span> 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();
}
}
});
类似资料：