下载文档

浮动窗口模块Frame
更新时间:2016-05-06

再次封装相关浮动窗口的基础操作

appcan.frame.open(id,url,left,top,name,index,change,extraInfo)

打开一个浮动窗口,如果不存在则会先创建然后再打开,如果存在则直接打开,就会在页面中查找id的元素,把id元素的宽高指定为浮动窗口的宽高,把id元素的font-size设置为id元素的font-size
再次封装appcan.window.openPopover常用参数(简化版)

  1. id:要打开浮动窗口的名称
  2. url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口
  3. left:浮动窗口距离左边的距离
  4. top:浮动窗口距离上边的距离
  5. name:强制改变打开窗口的名称
  6. index:设置选中的多页面窗口的默认索引
  7. change:如果多页面浮动窗口改变时会触发该回调,该回调有以下两个参数:err:正确返回情况下为null,错误时为Error信息.res:返回当前选择的浮动窗口页面的数据,

json格式如下:

  1. {"multiPopName":"name","multiPopSelectedIndex":"index"} 各字段含义如下
参数 是否必须 说明
multiPopName 多页面浮动窗口的名字
multiPopSelectedIndex 子页面窗口索引
  1. extraInfo:扩展参数,json格式如下: {"extraInfo":{"opaque":"true","bgColor":"#011","delayTime":"250"}}

参数还可以以对象的形式传参:

  1. {
  2. id:'',
  3. url:'',
  4. left:'',
  5. top:'',
  6. name:'',
  7. index:'',
  8. change:''
  9. }

例如:
实例下载 ,打开多浮动页面之间可滑动切换,设置是否支持滑动参照setMultilPopoverFlippingEnbaled

  1. //弹出一个简单的demo浮动窗口,并打开appcan.cn
  2. appcan.frame.open({
  3. id:'content',
  4. url:'http://appcan.cn',
  5. top:100,
  6. left:100
  7. });
  8. //打开多页面浮动窗口
  9. var top = $('#header').offset().height;
  10. appcan.frame.open({
  11. id : "content",
  12. url : [{
  13. "inPageName" : "LV0",
  14. "inUrl" : "lv_thinline_content.html",
  15. }, {
  16. "inPageName" : "LV1",
  17. "inUrl" : "lv_thinline_angle_content.html",
  18. }, {
  19. "inPageName" : "LV2",
  20. "inUrl" : "lv_thinline_sub_angle_content.html",
  21. }],
  22. top : top,
  23. left : 0,
  24. index : appcan.locStorage.getVal("lv_index"),
  25. change : function(err, res) {
  26. }
  27. });
  28. //另外一种使用方式
  29. var frame = appcan.require('frame');
  30. frame.open({
  31. id:'content',
  32. url:'http://appcan.cn',
  33. top:100,
  34. left:100
  35. });
  36. //打开多页面浮动窗口
  37. frame.open({
  38. id:'content',
  39. url:['http://appcan.cn','http://3g2win.com'],
  40. top:100,
  41. left:100
  42. });

appcan.frame.close(name)

关闭指定的浮动窗口

  1. name:浮动窗口的名字

参数还可以以对象的形式传参:

  1. {
  2. name:''
  3. }

例如:

  1. //关闭demo浮动窗口
  2. appcan.frame.close('demo');
  3. //另外一种使用方式
  4. var frame = appcan.require('frame');
  5. frame.close('demo');

appcan.frame.resize(id,left,top,name)

设置指定的浮动窗口恢复到指定窗口的大小,并设置浮动窗口的位置

  1. id:指定的元素,根据该元素设置浮动窗口的大小
  2. left:浮动窗口距离左边界的距离
  3. top:浮动窗口距离上边界的距离
  4. name:要设置的浮动窗口的名称,如果id没有传值的话使用这个值

参数还可以以对象的形式传参:

  1. {
  2. id:'',
  3. left:'',
  4. top:'',
  5. name:''
  6. }

例如:

  1. //重置demo窗口,位置
  2. appcan.frame.resize({
  3. id:'container',
  4. left:100,
  5. top:100
  6. });
  7. //另外一种使用方式
  8. var frame = appcan.require('frame');
  9. frame.resize({
  10. id:'container',
  11. left:100,
  12. top:100
  13. });

appcan.frame.resizePopoverByEle(id,left,top,name)

设置指定的浮动窗口恢复到指定窗口的大小,并设置浮动窗口的位置

  1. id:指定的元素,根据该元素设置浮动窗口的大小
  2. left:浮动窗口距离左边界的距离
  3. top:浮动窗口距离上边界的距离
  4. name:要设置的浮动窗口的名称,如果id没有传值的话使用这个值

参数还可以以对象的形式传参:

  1. {
  2. id:'',
  3. left:'',
  4. top:'',
  5. name:''
  6. }

例如:

  1. //重置demo窗口,位置
  2. appcan.frame.resizePopoverByEle({
  3. id:'container',
  4. left:100,
  5. top:100
  6. });
  7. //另外一种使用方式
  8. var win = appcan.require('frame');
  9. win.resizePopoverByEle({
  10. id:'container',
  11. left:100,
  12. top:100
  13. });

appcan.frame.bringToFront(name)

把指定的浮动窗口设置为最上层

  1. name:要设置的弹出层的名称

参数还可以以对象的形式传参:

  1. {
  2. name:''
  3. }

例如:

  1. //把demo窗口显示到所有窗口最上面
  2. appcan.frame.bringToFront('demo');
  3. //另外一种使用方式
  4. var frame = appcan.require('frame');
  5. frame.bringToFront('demo');

appcan.frame.evaluateScript(name,popName,scriptContent)

在指定的浮动窗口内执行响应的脚本

  1. name:要执行脚本的窗口名称
  2. popName:要执行的浮动窗口的名称
  3. scriptContent:要执行的脚本内容

参数还可以以对象的形式传参:

  1. {
  2. name:'',
  3. popName:'',
  4. scriptContent:''
  5. }

例如:

  1. //在demo窗口的浮动窗口执行脚本
  2. appcan.frame.evaluateScript({
  3. name:'demo',
  4. popName:'demoPop',
  5. scriptContent:'alert("hello world")'
  6. });
  7. //另外一种使用方式
  8. var frame = appcan.require('frame');
  9. frame.evaluateScript({
  10. name:'demo',
  11. popName:'demoPop',
  12. scriptContent:'alert("hello world")'
  13. });

appcan.frame.openMulti(popName,content,dataType, left, top, width, height, fontSize, flag, indexSelected)

打开多页面浮动窗口,页面之间可滑动切换,设置是否支持滑动参照setMultilPopoverFlippingEnbaled

  1. popName:打开新窗口的名称
  2. content:要传入的数据,一个json对象,或者json字符串,结构必须为{'content':[{"inPageName":"p1", "inUrl":"xxx1.html","inData":""}]} 其中:inPageName:所包含的单页面窗口的名字,inUrlurl类型数据,inData:窗口的内容的二进制数据,可为空
  3. dataType:窗口载入的数据的类型,0url方式载入;1html内容 方式载入;(//必如传入的是一个<div></div>)2:既有url方式,又有html内容方式
  4. left:距离左边界的距离
  5. top:距离上边界的距离
  6. width:窗口的宽
  7. height:窗口的高
  8. fontSize:字体的大小
  9. flag:窗口类型
  10. 0: 普通窗口
  11. 1: OAuth 窗口
  12. 2: 加密页面窗口
  13. 4: 强制刷新
  14. 8: url用系统浏览器打开
  15. 16: view不透明
  16. 32: 隐藏的winwdow
  17. 64: 等待popOver加载完毕后显示
  18. 128: 支持手势
  19. 256: 标记opnwindow上一个window不隐藏
  20. 512: 标记open的浮动窗口用于打开wabapp
  21. indexSelected:默认显示的索引项,默认显示第一项

参数还可以以对象的形式传参:

  1. {
  2. popName:'',
  3. content:'',
  4. dataType:'',
  5. left:'',
  6. top:'',
  7. width:'',
  8. height:'',
  9. fontSize:'',
  10. flag:'',
  11. indexSelected:''
  12. }

例如:
实例下载

  1. //打开一个四个窗口的浮动窗口
  2. appcan.frame.openMulti({
  3. popName:'nav',
  4. content:{
  5. content:[{
  6. inPageName:'p1',
  7. inUrl:'http://www.appcan.cn',
  8. inData:''
  9. },{
  10. inPageName:'p2',
  11. inUrl:'http://www.appcan.cn',
  12. inData:''
  13. },{
  14. inPageName:'p3',
  15. inUrl:'http://www.appcan.cn',
  16. inData:''
  17. },{
  18. inPageName:'p4',
  19. inUrl:'http://www.appcan.cn',
  20. inData:''
  21. }]
  22. },
  23. height:500,
  24. dataType:0,
  25. indexSelected:2
  26. });
  27. //另外一种使用方式
  28. var frame = appcan.require('frame');
  29. frame.openMulti({
  30. popName:'nav',
  31. content:{
  32. content:[{
  33. inPageName:'p1',
  34. inUrl:'http://www.appcan.cn',
  35. inData:''
  36. },{
  37. inPageName:'p2',
  38. inUrl:'http://www.appcan.cn',
  39. inData:''
  40. },{
  41. inPageName:'p3',
  42. inUrl:'http://www.appcan.cn',
  43. inData:''
  44. },{
  45. inPageName:'p4',
  46. inUrl:'http://www.appcan.cn',
  47. inData:''
  48. }]
  49. },
  50. height:500,
  51. dataType:0,
  52. indexSelected:2
  53. });

appcan.frame.closeMulti(popName)

关闭多页面浮动窗口

  1. popName:多页面窗口的名称

参数还可以以对象的形式传参:

  1. {
  2. popName:''
  3. }

例如:

  1. //关闭指定的多页面浮动窗口
  2. appcan.frame.closeMulti('nav');
  3. //另外一种使用方式
  4. var frame = appcan.require('frame');
  5. frame.closeMulti('nav');

appcan.frame.selectMulti(popName,index)

设置多页面浮动窗口跳转到的子页面窗口的索引

  1. popName:要设置的多页面浮动窗口的名称
  2. index:要设置的多页面浮动窗口页面的索引

参数还可以以对象的形式传参:

  1. {
  2. popName:'',
  3. index:''
  4. }

例如:

  1. //选择第三个页面
  2. appcan.frame.selectMulti('nav',2);
  3. //另外一种使用方式
  4. var frame = appcan.require('frame');
  5. frame.selectMulti('nav',2);

appcan.frame.sendToBack(name)

把指定的浮动窗口设置到最下层

  1. name:要设置的浮动窗口名称

参数还可以以对象的形式传参:

  1. {
  2. name:''
  3. }

例如:

  1. //把a窗口放到最下成
  2. appcan.frame.sendToBack('a')
  3. //另外一种使用方式
  4. var frame = appcan.require('frame');
  5. frame.sendToBack('a')

appcan.frame.setBounce(bounceType,startPullCall,downEndCall,upEndCall,color,imgSettings)

设置上下弹动效果

  1. bounceType:弹动的类型,如果为多个请用数组
  2. 0: 是向下拖动
  3. 1: 是向上拖动
  4. startPullCall:开始滑动时触发回调
  5. downEndCall:上拉或者下拉超过边界执行回调
  6. upEndCall:上拉或者下拉,超过边界之后,恢复最初状态执行回调
  7. color:如果超过了该边界显示的背景颜色
  8. imgSettings:如果超过了该边界,并且想要设置显示的内容包括图片文字则设置该参数

关于imgSettings的设定的实例:

  1. {
  2. "imagePath":"res://reload.png",
  3. "textColor":"#530606",
  4. "pullToReloadText":"拖动刷新",
  5. "releaseToReloadText":"释放刷新",
  6. "loadingText":"加载中,请稍等"
  7. }

参数还可以以对象的形式传参:

  1. {
  2. bounceType:'',
  3. startPullCall:function(){
  4. //do somethings
  5. },
  6. downEndCall:function(){
  7. //do somethings
  8. },
  9. upEndCall:function(){
  10. //do somethings
  11. },
  12. color:'',
  13. imgSettings:{}
  14. }

例如:

  1. //给页面添加一个简单的弹动效果
  2. appcan.frame.setBounce({
  3. bounceType:'1',
  4. color:'#F00',
  5. upEndCall:function(type){
  6. }
  7. });
  8. //另一种使用方式
  9. var frame = appcan.require('frame');
  10. frame.setBounce({
  11. bounceType:'1',
  12. color:'#F00',
  13. upEndCall:function(type){
  14. }
  15. });