最新版本号[免费下载]

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

作者:本站编辑 发布时间:2015-11-16 来源:本站原创 点击数:

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);
});

本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
AI智能听书
选取音色