Xcode自定义app内部导航栏
一.说明
inappbrowser和安装插件themeablebrowser都是内置浏览器。
后者兼容前者所有功能，且后者可以自定义导航栏的样式。
一.安装插件
1.通过cordova 安装插件themeablebrowser
控制台命令：cordova plugin add cordova-plugin-themeablebrowser
二.图片素材位置
1.设计图片位置：项目名称（xuewo）/platforms/ios/www/img/**.png
2.设计图片位置：项目名称（xuewo）/www/img/**.png
说明：1和2文件要保持一致
back.png返回按钮
back_pressed.png返回按钮按下去后
forward.png前进按钮
forward_pressed.png前进按下去后
三.在项目中代码引入插件
1.修改代码位置：项目名称（xuewo）/platforms/ios/www/js/index.js
2.修改代码位置：项目名称（xuewo）/www/js/index.js
说明：1和2文件要保持一致
receivedEvent: function(id) {
var options={
toolbar: {
height: 44,
color: '#f6f6f6'
},
title: {
color: '#000000',
showPageTitle: true
},
backButton: {
wwwImage: 'img/back.png',
wwwImagePressed: 'img/back_pressed.png',
wwwImageDensity: 2,
align: 'left',
event: 'backPressed'
},
forwardButton: {
wwwImage: 'img/forward.png',
wwwImagePressed: 'img/forward_pressed.png',
wwwImageDensity: 2,
align: 'right',
event: 'forwardPressed'
},
backButtonCanClose: false
};
cordova.ThemeableBrowser.open('http://chongzhi.inkanke.com/app/index.php?i=4&c=entry&do=shop&m=ssy_fxshop', '_blank', options).addEventListener('sharePressed', function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
console.log(e.message);
});
}
};
四.代码解析
receivedEvent: function(id) {
var options={
//导航条
toolbar: {
height: 44,／／高度
color: '#f6f6f6'／／背景颜色
},
／／导航中间显示访问网站标题
title: {
color: '#000000',／／颜色
showPageTitle: true／／是否显示
},
／／后退按钮
backButton: {
wwwImage: 'img/back.png',
wwwImagePressed: 'img/back_pressed.png',／／按下后
wwwImageDensity: 2,／／数字越大图标越小
align: 'left',／／后退按钮显示导航栏的位置
event: 'backPressed'
},
／／前进按钮
forwardButton: {
wwwImage: 'img/forward.png',
wwwImagePressed: 'img/forward_pressed.png',
wwwImageDensity: 2,
align: 'right',
event: 'forwardPressed'
},
／／当没有后退时，点击后退按钮无反应，当true时，点击后退为退出浏览器
backButtonCanClose: false
};
cordova.ThemeableBrowser.open('项目url', '_blank', options).addEventListener('sharePressed', function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
console.log(e.message);
});
}
};
说明：导航条背景色建议和按钮图片素材背景色保持一致.
素材建议美工制作完美
附：文档地址：https://github.com/initialxy/cordova-plugin-themeablebrowser
转载请注明原文地址: https://ju.6miu.com/read-10890.html
