Top
首页 > IT产品和服务 > 第一资讯 > 正文

AppCan应用开发之多窗口实例

发布时间:2016-07-28 11:05        来源:        作者:

之前为大家介绍了在AppCan开发中的4种常用的多浮动窗口实现方法,有些开发者希望能了解到多窗口在实际项目中的应用,这里就以移动门户项目中的工作报告模块为例,为大家介绍笔者比较推荐的appcan.frame.open 方法如何应用。

上面是移动门户项目中工作报告的列表页面,可以看到是分为三个模块,周报,月报和年终总结。这个地方我们采取的是多浮动窗口模式,而且支持手势滑动切换模块。

1.通过IDE插入控件,插入文字式的选项卡,插入后代码如下:

var tabview = appcan.tab({

selector : "#tabview",

hasIcon : false,/*是否有图标*/,

hasAnim : true,/*切换时是否有动画*/

hasLabel : true,/*是否有文字*/,

hasBadge : false,/*是否有badge*/

data : [{

label : " 周报 "

}, {

label : " 月报 "

}, {

label : "年终总结"

}]

});

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

appcan.window.selectMultiPopover("content", index);//设置多页面浮动窗口跳转到的子页面窗口的索引

})

2.在主窗口index页面实现打开多浮动窗口,通过以下代码加载多个浮动窗口:

appcan.frame.open({

id : "content",//要打开浮动窗口的名称

url : [{

"inPageName" : "weekly",

"inUrl" : "gzbg_week_content.html?type="+type,

}, {

"inPageName" : "monthReport",

"inUrl" :'gzbg_month_content.html?type='+type,

}, {

"inPageName" : "yearReport",

"inUrl" :'gzbg_year_content.html?type='+type,

}],

top : titHeight,//浮动窗口距离上边界的距离

left : 0,//浮动窗口距离左边界的距离

index : 0,//设置选中的多页面窗口的默认索引

change : function(err, res) {//手势滑动的时候触发

tabview.moveTo(res.multiPopSelectedIndex);

}

});

3.在插入的控件代码中,点击时通过以下代码,设置多页面浮动窗口跳转到子页面窗口的索引。

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

4.通过以下代码实现多窗口手势滑动

tabview.moveTo(res.multiPopSelectedIndex);

如上述步骤,即完成项目中的多窗口应用,在其他类型APP中,也可根据实际需求情况,参考此类方法来实现。

合作站点
stat