cordova dialog插件

最新推荐文章于 2024-06-10 09:33:02 发布

michael_ouyang

最新推荐文章于 2024-06-10 09:33:02 发布

阅读量4k

点赞数 2

分类专栏： cordova 文章标签： cordova plugin webapp dialog

本文链接：https://blog.csdn.net/michael_ouyang/article/details/75091309

版权

cordova 专栏收录该内容

21 篇文章 5 订阅

订阅专栏

dialog插件

cordova-plugin-dialogs

介绍

这个插件将调用平台的本地对话框的UI元素。

安装

cordova plugin add cordova-plugin-dialogs

使用方法

虽然对象连接到全局的navigator对象中，但是需要使用在deviceready事件之后。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.notification);
}

方法

navigator.notification.alert
navigator.notification.confirm
navigator.notification.prompt
navigator.notification.beep

navigator.notification.alert

显示自定义alert对话框

参数：

message：对话框的消息（字符串）
alertCallback：alert对话框点击确认后执行回调。（函数）
title：标题（字符串）（可选，默认为Alert）
buttonName：按钮名字。（字符串）（可选，默认为OK）

支持的平台Supported Platforms

Amazon Fire OS
Android
BlackBerry 10
Browser
Firefox OS
iOS
Tizen
Windows Phone 7 and 8
Windows 8
Windows

navigator.notification.confirm

显示一个可定制的确认对话框。

参数：

message：对话框的消息（字符串）
confirmCallback：回调调用指标按下按钮（1, 2，3）或当对话框被取消不按键（0）。（函数）
title：对话框标题（字符串）（可选，默认为Confirm）
buttonLabels：指定按钮标签字符串数组。（数组）（可选，默认为[OK，Cancel]）

confirmCallback 确认回调函数

当用户按下某个按键的确认对话框，这个confirmcallback执行。
回调拿到参数buttonindex（数字型），这是按下按钮索引。需要注意的是，索引号采用一个数字的索引，所以值1, 2, 3，等

支持的平台Supported Platforms

Amazon Fire OS
Android
BlackBerry 10
Browser
Firefox OS
iOS
Tizen
Windows Phone 7 and 8
Windows 8
Windows

navigator.notification.prompt

显示一个对话框，在comfirm确认框的基础上还可以输入文本内容

参数：

message：对话的消息（字符串）
promptcallback：回调调用指标按下按钮（1, 2，3）或当对话框被取消不按键（0）。（函数）
title：对话框的标题（字符串）（可选，默认为提示）
buttonLabels：用字符串数组包含这些按钮的标签（数组）（可选，默认为["OK","Cancel"]）
defaultText：textbox输入值（字符串）（可选，默认为空字符串）

promptCallback回调

这个promptCallback 当用户按下一个执行的 prompt 提示对话框。这个结果对象通过以下属性的callbackcontains：
buttonIndex：所按下的按钮的索引。（数）需要注意的是，指数使用一个索引，那么价值1,2,3等
input1：在提示对话框中输入的文本。（字符串）

支持的平台Supported Platforms

Amazon Fire OS
Android
Browser
Firefox OS
iOS
Windows Phone 7 and 8
Windows 8
Windows

navigator.notification.beep

设备播放短信提示声音

参数：

times：重复响铃的次数（数）

支持的平台Supported Platforms

Amazon Fire OS
Android
BlackBerry 10
Browser
iOS
Tizen
Windows Phone 7 and 8
Windows 8

示例

示例一：alert

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
        <style>
            li{
                padding: 5px 0;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <h1>Dialog插件</h1>
            <ul id="ready">
                <li><button id="alert">alert</button></li>
                <li><button id="DialogAlert">DialogAlert</button></li>
            </ul>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.defaultAlert();
        this.dialogAlert();
    },
    defaultAlert: function() {
        var dom = document.getElementById('alert');
        dom.onclick = function(){
            alert("这是一个alert弹窗!");
        }
    },
    dialogAlert: function() {
        var dom = document.getElementById('DialogAlert');
        dom.onclick = function(){
            navigator.notification.alert(
                '这是一个alert弹窗!',    // 对话的消息
                alertCallback,             // 回调函数
                '提示',                      // 标题
                '确认'                       // 按钮文字
            );
        }
        function alertCallback(){
            console.log("触发了吗");
        }
    }
};

app.initialize();

运行：

模拟器测试：三星S5 android 6.0

点击“alert”按钮，运行是一个默认的alert弹窗

点击“DialogAlert”按钮，运行时dialog插件的alert弹窗

真机测试：小米X4 android 6.0

点击“alert”按钮，运行是一个默认的alert弹窗

点击“DialogAlert”按钮，运行时dialog插件的alert弹窗

真机测试：三星NOTE2 android 4.1测试

点击“alert”按钮，运行是一个默认的alert弹窗

点击“DialogAlert”按钮，运行时dialog插件的alert弹窗

小结：

使用默认的alert弹窗，和使用dialog插件的alert弹窗的区别：

（1）样式相似，只是颜色相反

（2）在不同的手机上，样式都会有不同的展现

（3）dialog插件的alert有回调函数

示例二：confirm

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
        <style>
            li{
                padding: 5px 0;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <h1>Dialog插件</h1>
            <ul id="ready">
                <li><button id="confirm">confirm</button></li>

            </ul>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.dialogComfirm();
    },
    dialogComfirm: function(){
        var dom = document.getElementById('confirm');
        dom.onclick = function(){
            navigator.notification.confirm(
                '这是一个confirm弹窗!',      	// 对话的消息
                onConfirm,                 	// 回调函数
                '提示',                      	// 标题
                ['确认','取消']            	// 按钮文字
            );
        }
        function onConfirm(buttonIndex){
            console.log("你选择的按钮是："+ buttonIndex);
        }
    }
};

app.initialize();

运行：

模拟器测试：三星S5 android 6.0

点击“confirm”按钮，运行dialog插件的confirm弹窗

点击“确认”键，输出的是1。

这个数字可以作用判断条件，要是等于1的就是用户按了“确认”键，执行相关的代码逻辑。

真机测试：三星NOTE2 android 4.1测试

点击“confirm”按钮，运行dialog插件的confirm弹窗

小结：

（1）使用dialog插件的confirm确认弹窗，在不同的手机上，同样也是不同样式

示例三：prompt

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
        <style>
            li{
                padding: 5px 0;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <h1>Dialog插件</h1>
            <ul id="ready">
                <li><button id="prompt">prompt</button></li>

            </ul>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.dialogPrompt();
    },
    dialogPrompt: function(){
        var dom = document.getElementById('prompt');
        dom.onclick = function(){
            navigator.notification.prompt(
                '这是一个confirm弹窗!',   // 对话的消息
                onPrompt,                   // 回调函数
                '提示',                    // 标题
                ['确认','取消'],           // 按钮文字
                '可输入内容'               //默认文字
            );
        }
        function onPrompt(results){
            console.log("你选择的按钮是："+ results.buttonIndex +"\n输入的内容：" + results.input1);
        }
    }
};

app.initialize();

运行：

模拟器测试：三星S5 android 6.0

点击“prompt”按钮，运行dialog插件的prompt弹窗

弹窗内可以输入文字

点击“确认”键，输出以下内容：

真机测试：三星NOTE2 android 4.1测试

小结：

（1）使用dialog插件的prompt确认弹窗，在不同的手机上，同样也是不同样式

示例四：beep

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
        <style>
            li{
                padding: 5px 0;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <h1>Dialog插件</h1>
            <ul id="ready">
                <li><button id="beep">beep</button></li>
            </ul>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.dialogBeep();
    },
    dialogBeep: function(){
            var dom = document.getElementById('beep');
            dom.onclick = function(){
                navigator.notification.beep(2);
            }
     }
};

app.initialize();

运行：

点击“beep”按钮后，手机会响2次手机设置的短信提示音。

michael_ouyang

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
cordova dialog插件

dialog插件cordova-plugin-dialogs介绍这个插件提供了一些本地的对话框界面elementsvia全球navigator.notification目标安装cordova plugin add cordova-plugin-dialogs使用方法虽然对象连接到全局的navigator对象中，但是需要使用
复制链接

扫一扫

专栏目录