Xcode自定义app内部导航栏

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