Cordova對話方塊

第1步 - 安裝對話方塊

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

第2步 - 新增按鈕

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>>

第3步 - 新增事件監聽器

現在，我們將在index.js中的 onDeviceReady函式內部新增事件偵聽器。一旦相應的按鈕被點選，監聽器將呼叫回撥函式。

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);	

步驟4A- 建立提示函式

因為我們新增了四個事件偵聽器，在 index.js 中建立所有回撥函式。第一個是 dialogAlert。

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
	
   navigator.notification.alert(message, alertCallback, title, buttonName);

   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
	
}

當我們點選對話方塊按鈕，我們將得到控制台輸出。

步驟4b- 建立確認函式

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
	
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

當按下確認鈕，新的對話方塊會彈出。

步驟4C- 建立提示函式

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
	
   navigator.notification.prompt(message, promptCallback, title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

在這個對話方塊中，我們有選項鍵入的文字。將按鈕點選登入控制台這段文字。

步驟4D- 建立Beep函式 

最後一個是對話方塊提示音。這是用於呼叫音訊嘟嘟聲通知。該 times 引數將設定重複發出嗶嗶聲信號的次數。

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}