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

posted @ 2017-10-19 19:47  紫华  阅读(352)  评论(0)  编辑  收藏  举报