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.alertnavigator.notification.confirm
navigator.notification.prompt
navigator.notification.beep
navigator.notification.alert
显示自定义alert对话框
参数:
message:对话框的消息(字符串)alertCallback:alert对话框点击确认后执行回调。(函数)
title:标题(字符串)(可选,默认为Alert)
buttonName:按钮名字。(字符串)(可选,默认为OK)
支持的平台Supported Platforms
Amazon Fire OSAndroid
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 OSAndroid
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 OSAndroid
Browser
Firefox OS
iOS
Windows Phone 7 and 8
Windows 8
Windows
navigator.notification.beep
设备播放短信提示声音
参数:
times:重复响铃的次数(数)
支持的平台Supported Platforms
Amazon Fire OSAndroid
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次手机设置的短信提示音。