summer.openWin方法
功能:打开窗口(window)。
语法:summer.openWin({params})
最简单的例子:
打开main.html,设置这个页面id为main
summer.openWin({
id : "main",
url : 'html/main.html'
});
}
下面是它的参数:
- id:
- 类型:字符串
- 默认值:无
- 描述:window 名字,不能为空字符串
- appid:
- 类型:字符串
- 默认值:无
- 描述:子应用标识(子应用的id),用于打开指定子应用
- url:
- 类型:字符串
- 默认值:无
- 描述:页面地址,可以为本地文件路径,支持相对路径和绝对路径,也可以为远程地址即http(s)互联网网址路径
- isKeep:
- 类型:布尔型
- 默认值:true
- 描述:打开一个新win的同时,老的win要不要关闭,默认为true
- create
- 类型:布尔型
- 默认值:true
- 描述:如果设置为true,打开一个新win时,会等页面加载完成才显示,如果设置为false,会保留原生header,直接打开页面,然后再加载页面内容。默认是为ture
- show
- 类型:布尔型
- 默认值:true
- 描述:当create为false时,此时设置show值无效。当create为true时,如果设置show为true,在页面加载完后直接显示,如果设置show为false,则页面不显示,需要手动调用summer.showWin()来显示。默认为true
- pageParam:
- 类型:JSON 对象
- 默认值:无
- 描述:(可选项)页面参数,新页面中可以通过 summer.pageParam 获取
type:
- 类型:字符串
- 默认值:无
- 可选值:externalLink,actionBar,tabbar,speechWin,waveSpeech
- 描述:(可选项)打开Window类型。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="css/iuapmobile.um.css">
<script src="js/summer.js" ></script>
<script src="js/jquery.min.js" ></script>
<script src="js/Frameworks/iuapmobile.frameworks.ui.js" ></script>
<script src="js/index.js" ></script>
</head>
<body>
<div id="win" class="um-win" >
<div id="header" class="um-header">
<a href="#" class="um-back">返回</a>
<h3>iuap mobile</h3>
<a href="#" class="um-header-right ti-plus f20"></a>
</div>
<div id="content" class="um-content p15">
<div>
<button class="btn" οnclick="openScanner()">
扫一扫
</button>
</div>
<div style="padding-top: 20px;">
<button class="btn" οnclick="openZBar()">
ZBar扫一扫
</button>
</div>
<div style="padding-top: 20px;">
<button class="btn" οnclick="openMainA()">
打开窗口1
</button>
</div>
<div style="padding-top: 20px;">
<button class="btn" οnclick="openMainB()">
打开窗口2
</button>
</div>
<div style="padding-top: 20px;">
<button class="btn" οnclick="openMainC()">
打开窗口3
</button>
</div>
</div>
<div id="footer" class="um-footer">
<div class="um-footerbar">
<a id="item0" href="#" class="um-footerbar-item"> <i class="ti-comments f20"></i>
<div class="f12 lh1">
消息
</div> </a>
<a id="item1" href="#" class="um-footerbar-item"> <i class="ti-notepad f20"></i>
<div class="f12 lh1">
日程
</div> </a>
<a id="item2" href="#" class="um-footerbar-item active"> <i class="ti-agenda f20"></i>
<div class="f12 lh1">
通讯录
</div> </a>
<a id="item3" href="#" class="um-footerbar-item"> <i class="ti-user f20"></i>
<div class="f12 lh1">
我
</div> </a>
</div>
</div>
</div>
</body>
<script>
function openScanner() {
summer.openScanner({
callback : function(args) {
$summer.alert(args.umdcode);
}
});
}
function openZBar() {
var params = {
zxing : false
};
ZBar.scan(params, function(args) {
$summer.alert(args);
}, function(args) {
$summer.alert(args);
});
}
/*打开外链*/
function openMainA() {
summer.openWin({
id : 'mainA',
url : 'http://www.baidu.com',
type: "externalLink",//打开外链接,页面跳转二级以上,导航栏出现关闭按钮
create: false,
title: "自定义title",
image: "img/back.png", // 在www目录下的图片位置,路径随意放置,返回按钮图片
titleColor: "#000000", //标题、返回、关闭的字体颜色,注意必须是6位数的颜色值。(3位数颜色值会不正常)
navigationbgColor: "#ffffff" //导航栏 的背景色,注意必须是6位数的颜色值。(3位数颜色值会不正常)
});
}
/*添加原生导航栏*/
function openMainB() {
summer.openWin({
id:'main',
url:'html/main.html',
type: "actionBar",
create: false, //设置保留原生header
actionBar: {
title: "TA的信息",
titleColor: "#333333", //注意必须是6位数的颜色值。(3位数颜色值会不正常)
backgroundColor: "#ffffff",
leftItem:{
image: "img/back.png",
method:"", //返回按钮自定义事件,不传方法时默认点击返回后关闭当前页面,也可在打开的window中自定义事件
text:"返回按钮",
textColor:"#000000" //返回文字颜色,注意必须是6位数的颜色值。(3位数颜色值会不正常)
},
rightItems:[{
type:"image",
image:"img/back.png",
method:"" //在打开的window中自定义事件
},{
type:"text",
text:"文字",
textColor:"#333333", //文字颜色,注意必须是6位数的颜色值。(3位数颜色值会不正常)
method:"" //在打开的window中自定义事件
}]
}
});
}
function openMainC() {
summer.openWin({
id:'otherHome',
url:'html/main.html',
type: "tabbar",
create: false,
isKeep: false
});
}
</script>
</html>
externalLink:通常用于打开外部链接,链接在跳转到二级以上页面时,导航栏出现关闭按钮。
actionBar:用于给新页面添加原生导航栏,便于页面跳转时更流畅,原生导航栏样式由anctionBar对象决定。
tabBar:用于导航栏和tabBar都是原生的情况,可根据theme.json,application.json(暂未开放)文件定制原生的导航栏和tabBar。
addBackListener :
- 类型:字符串
- 默认值:无
- 描述:(可选项)监听所打开页面的返回键,若值设为”true”,则会去调用所打开页面的keyBack函数(该函数需用户自己定义,函数名必须为keyBack,且必须定义成全局函数,不能定义在summerready中),如果需要关闭页面,可在keyBack函数中调用summer.closeWin()
//在当前index页面中去打开main页面,则需要在main页面中定义keyBack方法
summer.openWin({
id:"main",
url:"html\main.html",
"addBackListener":"true"
});
//在main页面中定义全局的keyBack函数
function keyBack(){
summer.closeWin();
}
//在全局的keyBack函数中判断是否连续两次点击返回键,
var turn = 0;
function keyBack(){
turn++;
if(turn==2){
clearInterval(intervalID);
summer.exitApp()
}else{
summer.toast({"msg":"再点击一次退出!"});
}
var intervalID = setInterval(function() {
clearInterval(intervalID);
turn=0;
}, 3000);
}
类型:字符串默认值:无描述:(可选项)监听所打开页面的返回键,若值设为”true”,则会去调用所打开页面的keyBack函数(该函数需用户自己定义,函数名必须为keyBack,且必须定义成全局函数,不能定义在summerready中),如果需要关闭页面,可在keyBack函数中调用summer.closeWin()
- bounces:
- 类型:布尔型
- 默认值:若在 config.xml 里面配置了pageBounce,则默认值为配置的值,否则为 false
- 描述:(可选项)页面是否弹动
- bgColor:
- 类型:字符串
- 默认值:若在 config.xml 里面配置了 windowBackground,则默认值为配置的值,否则透明
- 描述:(可选项)背景色,支持图片和颜色,格式为 #ffffff;(必须是6位)图片路径支持相对路径
- reload:
- 类型:布尔型
- 默认值:false
- 描述:(可选项)页面已经打开时,是否重新加载页面,重新加载页面后 summerready 方法将会被执行
- softInputMode:
- 类型:字符串
- 默认值:auto
- 描述:(可选项)当键盘弹出时,输入框被盖住时,当前页面的调整方式,详见键盘弹出页面调整方式常量;只iOS有效,Android请在 config.xml 里面配置。
- fullScreen:
- 类型:布尔型
- 默认值:false
- 描述:(可选项)打开的window是否全屏显示。如果没有该参数,则默认不全屏。
- statusBarAppearance:
- 类型:布尔型
- 默认值:true
- 描述:(可选项)打开的window是否显示手机的状态条。如果没有该参数,则默认显示状态条。
- 组合:fullScreen和statusBarAppearance的组合
还有很多参数暂时不描述。
注意事项:
openWin的id代表它的名字,要有唯一性。
今天的api学习到此结束,2018.3.17周六
类型:字符串默认值:无描述:(可选项)监听所打开页面的返回键,若值设为”true”,则会去调用所打开页面的keyBack函数(该函数需用户自己定义,函数名必须为keyBack,且必须定义成全局函数,不能定义在summerready中),如果需要关闭页面,可在keyBack函数中调用summer.closeWin()