Xcode自定义app内部导航栏

本文档介绍了如何在Xcode项目中使用ThemeableBrowser插件自定义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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值