当前位置: 首页 > 工具软件 > AsyncBox > 使用案例 >

asyncbox open

籍兴文
2023-12-01
  • 窗口名:

  • 【页面内容框】

  • 函数调用:

  • 【命名空间】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 进行尝试。

转载于:https://www.cnblogs.com/luozihua/p/7694652.html

 类似资料:

相关阅读

相关文章

相关问答