cordova dialog插件

来源：互联网发布：淘宝开宠物用品店编辑：程序博客网时间：2024/06/01 08:55

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次手机设置的短信提示音。

阅读全文

1 0