PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 PhoneGap资讯 查看内容

Cordova WebView插件_可以加载外部url并且可以自定义导航颜色以及按钮 ...

2015-11-4 17:29| 发布者: admin| 查看: 11281| 评论: 3

摘要: Cordova WebView插件可以自定义导航颜色和按钮,比iframe好用n倍,比inappbrowser更实在今天给大家介绍的这款插件cordova-plugin-themeablebrowser,可以说是org.apache.cordova.inappbrowser 这款插件的升级版本。 ...

 cordova WebView插件可以自定义导航颜色按钮,比iframe好用n倍,比
inappbrowser更实在

今天给大家介绍的这款插件cordova-plugin-themeablebrowser,可以说是org.apache.cordova.inappbrowser 这款插件的升级版本。为什么这样说呢?

因为官方是这样说的。

cordova-plugin-themeablebrowser基于 org.apache.cordova.inappbrowser插件,包含了inappbrowser里面几乎所有的功能,但是这个插件更高级的地方就是他可以自定义导航的样式,以及在导航上面加菜单。

我们网站地址:http://www.phonegap100.com/plugininfo_42.html

官方地址:https://github.com/initialxy/cordova-plugin-themeablebrowser

上图:下面的导航大家能看出和APP导航什么区别吗?

那就是自定义的导航,返回安妮 分享按钮,下拉按钮都可以自己定义,并且点击都可以执行js






使用方式:

项目安装好后运行:

cordova plugin add cordova-plugin-themeablebrowser


Js调用方式:


cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
    statusbar: {
        color: '#ffffffff'
    },
    toolbar: {
        height: 44,
        color: '#f0f0f0ff'
    },
    title: {
        color: '#003264ff',
        showPageTitle: true
    },
    backButton: {
        image: 'back',
        imagePressed: 'back_pressed',
        align: 'left',
        event: 'backPressed'
    },
    forwardButton: {
        image: 'forward',
        imagePressed: 'forward_pressed',
        align: 'left',
        event: 'forwardPressed'
    },
    closeButton: {
        image: 'close',
        imagePressed: 'close_pressed',
        align: 'left',
        event: 'closePressed'
    },
    customButtons: [
        {
            image: 'share',
            imagePressed: 'share_pressed',
            align: 'right',
            event: 'sharePressed'
        }
    ],
    menu: {
        image: 'menu',
        imagePressed: 'menu_pressed',
        title: 'Test',
        cancel: 'Cancel',
        align: 'right',
        items: [
            {
                event: 'helloPressed',
                label: 'Hello World!'
            },
            {
                event: 'testPressed',
                label: 'Test!'
            }
        ]
    },
    backButtonCanClose: true
}).addEventListener('backPressed', function(e) {
    alert('back pressed');
}).addEventListener('helloPressed', function(e) {
    alert('hello pressed');
}).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);
});





头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

相关阅读

发表评论

最新评论

引用 joykit 2017-5-23 15:02
请问 分享 到 QQ 微信  微博 微信朋友圈  怎么做呢?
引用 zgq_love 2016-9-18 10:56
是啊,按钮我弄了好几天也没显示出来,有人能帮助一下么
引用 ak18cn 2015-11-11 09:49
自定义的导航是空白,没有返回安妮 分享按钮,下拉按钮也看不见,可以点

查看全部评论(3)

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2023-1-31 04:13 , Processed in 0.151586 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部