全屏与手机状态栏设置管理插件

状态栏管理插件提供了js设置状态栏状态和属性的接口,包括设置状态栏是否可见,状态栏的背景颜色,样式等,下面逐一介绍

1.设置状态栏是否可见,从而让app看上去是否是全屏的样子

显示状态栏

StatusBar.show();

隐藏状态栏

StatusBar.hide();

代码判断当前状态栏是否可见

if(StatusBar.isVisible){
//可见
}else{
//不可见
}

2.设置状态栏的背景颜色

通过颜色值设置背景颜色

StatusBar.backgroundColorByHexString('#ff0000');

通过颜色名称设置背景颜色

StatusBar.backgroundColorByName("red");

支持的颜色名称包括 black, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown

3.设置状态栏的样式

设置为默认样式

StatusBar.styleDefault();

设置为明快型样式

StatusBar.styleLightContent();

设置为黑重型样式

StatusBar.styleBlackTranslucent();

设置为黑种透明型样式

StatusBar.styleBlackOpaque();

设置IOS状态栏是否是沉浸式的,控制状态栏是否在网页内容之上浮现

StatusBar.overlaysWebView(true);

4.处理状态栏被点击的事件

window.addEventListener('statusTap', function() {
    // do what you want to do when status been tapped
});


5.完整的使用状态栏插件例子代码

<!DOCTYPE>
<html>
	<head>
		<title>lbuilder demo</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta http-equiv="Cache-Control" content="no-siteapp"/>
		<script type="text/javascript">
			document.addEventListener("statusTap", function(){alert('tap status bar');}, false);
		</script>
	</head>
	<body>
	<h3>Lbuilder demo</h3>
	<a href="javascript:StatusBar.show();" >show status bar</a><br/><br/>
	<a href="javascript:StatusBar.hide();" >hide status bar</a><br/><br/>
	<a href="javascript:StatusBar.overlaysWebView(true);" >overlays</a><br/><br/>
	<a href="javascript:StatusBar.overlaysWebView(false);" >no overlays</a><br/><br/>
	<a href="javascript:StatusBar.styleBlackTranslucent();" >black translucent style</a><br/><br/>
	<a href="javascript:StatusBar.backgroundColorByHexString('#ff0000');" >change color</a><br/><br/>
	</body>
</html>