AppCan开源之道:分享技术价值 连接企业和App开发者
发布在AppCan 移动应用开发平台2015年2月9日view:2369HTML5JavaScript移动开发jQuery
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

一般情况在主窗口打开多页面浮动窗口 ,需要调用的方法是appcan.window.openMultiPopover(popName,content,dataType, left, top, width, height,change, fontSize, flag, indexSelected)

参数:

popName:打开新窗口的名称

content:要传入的数据,一个json对象,或者json字符串,

结构必须为{content:[{“inPageName“:“p1“, “inUrl“:“xxx1.html“,“inData“:““}]} 其中:inPageName:所包含的单页面窗口的名字,inUrl:url类型数据,inData:窗口的内容的二进制数据,可为空

dataType:窗口载入的数据的类型

0:url方式载入;

1:html内容 方式载入;

2:既有url方式,又有html内容方式

left:距离左边界的距离

top:距离上边界的距离

width:窗口的宽

height:窗口的高

change(err,data):当浮动窗口的当前显示的值发生改变是触发的回调.

err:如果出错这个就是一个错误对象,否则为空.

data:{“multiPopName“:“name“,“multiPopSelectedIndex“:“index“}

fontSize:字体的大小

flag:窗口类型

0: 普通窗口

1: OAuth 窗口

2: 加密页面窗口

4: 强制刷新

8: url用系统浏览器打开

16: view不透明

32: 隐藏的winwdow

64: 等待popOver加载完毕后显示

128: 支持手势

256: 标记opn的window上一个window不隐藏

512: 标记open的浮动窗口用友打开wabapp

indexSelected:默认显示的索引项,默认显示第一项

具体步骤如下:

第一步:

在index页面头部插入一个tab控件,代码如下:

        <div id=“tabview“ class=“uf sc-bg“ id=““>

        </div>

        <!--header结束-->

JS代码中完善tab控件参数,如下

var tabview = appcan.tab({

        selector : “#tabview“,

        hasIcon : true,

        hasAnim : true,

        hasLabel : false,

        hasBadge : false,

        data : [{

            label : “QQ“,

            “icon“:“fa-qq“

        }, {

            label : “微软“,

            “icon“:“fa-windows“

        }, {

            label : “微信“,

            “icon“:“fa-weixin“,

            badge:1

        }]

    });

第二步:

给tab控件添加点击事件,并设置多页面浮动窗口跳转到的子页面窗口的索引,调用appcan.window.selectMultiPopover(popName,index)

popName:要设置的多页面浮动窗口的名称

index:要设置的多页面浮动窗口页面的索引

具体代码如下:

tabview.on(“click“,function(obj, index){

        appcan.window.selectMultiPopover(“content“,index);

    })

第三步:

在appcan.ready方法中去调用打开多窗口的方法,这里用的是appcan.window.openMultiPopover(popName,content,dataType, left, top, width, height,change, fontSize, flag, indexSelected),也可以调用appcan.frame.open方法,具体实现代码如下:

    appcan.ready(function() {

           //打开多窗口

  var top = $(`#header`).offset().height + $(`#tabview`).offset().height;

          //获取主窗口头部的高度

        appcan.frame.open({

            id : “content“,

            url : [{

                “inPageName“ : “OpenWin_content“,//窗口1名称

                “inUrl“ : “OpenWin_content.html“,//窗口1路径

            }, {

                “inPageName“ : “baidu“, //窗口2名称

                “inUrl“ : “http://m.baidu.com“, //窗口2路径

            }, {

                “inPageName“ : “appcan“,  //窗口3名称

                “inUrl“ : “http://www.appcan.cn“,//窗口3路径

            }],

            top : top,

            left : 0,

            index : 0,

            change:function(err,res){

                tabview.moveTo(res.multiPopSelectedIndex);

//移动到所选中的索引窗口

            }

        });
评论
发表评论
暂无评论
WRITTEN BY
AppCan
AppCan移动应用开发平台,具有开发速度快和运行速度快的“双快”特点,是国内Hybrid App混合模式开发技术的倡导者和领导者。AppCan由正益无线自主研发和运营,支持跨平台移动应用开发,提供移动应用管理与运行控制云服务,实现对移动应用全生命周期(Full LifeCycle)的支持和管理。◆ 领先的移动应用平台◆ 用HTML5开发Hybrid App◆ 提供高效的App管理和运行控制服务AppCan技术交流群:167599006技术咨询:将问题在论坛发帖:http://bbs.appcan.cn/forum.php 会有专职技术人员负责解答
TA的新浪微博
PUBLISHED IN
AppCan 移动应用开发平台

会点前端就能开发App, HTML5+CSS3+JavaScript

我的收藏