cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验
设置设备状态栏背景颜色
StatusBar.backgroundColorByHexString('#11c1f3');//设置数值类型
StatusBar.backgroundColorByName("white"); //设置名称类型
可以去参考 StatusBar插件的js源代码,里面很多设置方法。
var namedColors = {
"black": "#000000",
"darkGray": "#A9A9A9",
"lightGray": "#D3D3D3",
"white": "#FFFFFF",
"gray": "#808080",
"red": "#FF0000",
"green": "#00FF00",
"blue": "#0000FF",
"cyan": "#00FFFF",
"yellow": "#FFFF00",
"magenta": "#FF00FF",
"orange": "#FFA500",
"purple": "#800080",
"brown": "#A52A2A"
};
var StatusBar = {
isVisible: true,
overlaysWebView: function (doOverlay) {
exec(null, null, "StatusBar", "overlaysWebView", [doOverlay]);
},
styleDefault: function () {
// dark text ( to be used on a light background )
exec(null, null, "StatusBar", "styleDefault", []);
},
styleLightContent: function () {
// light text ( to be used on a dark background )
exec(null, null, "StatusBar", "styleLightContent", []);
},
styleBlackTranslucent: function () {
// #88000000 ? Apple says to use lightContent instead
exec(null, null, "StatusBar", "styleBlackTranslucent", []);
},
styleBlackOpaque: function () {
// #FF000000 ? Apple says to use lightContent instead
exec(null, null, "StatusBar", "styleBlackOpaque", []);
},
backgroundColorByName: function (colorname) {
return StatusBar.backgroundColorByHexString(namedColors[colorname]);
},
backgroundColorByHexString: function (hexString) {
if (hexString.charAt(0) !== "#") {
hexString = "#" + hexString;
}
if (hexString.length === 4) {
var split = hexString.split("");
hexString = "#" + split[1] + split[1] + split[2] + split[2] + split[3] + split[3];
}
exec(null, null, "StatusBar", "backgroundColorByHexString", [hexString]);
},
hide: function () {
exec(null, null, "StatusBar", "hide", []);
StatusBar.isVisible = false;
},
show: function () {
exec(null, null, "StatusBar", "show", []);
StatusBar.isVisible = true;
}
};