Cordova - 對話方塊

---

---

Cordova Dialogs 外掛將呼叫平臺本機對話方塊 UI 元素。

步驟 1 - 安裝對話方塊

在**命令提示符**視窗中鍵入以下命令以安裝此外掛。

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

步驟 2 - 新增按鈕

現在讓我們開啟**index.html**並新增四個按鈕，每個對話方塊型別一個。

<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 - 建立 Alert 函式

由於我們添加了四個事件監聽器，因此我們現在將在**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!");
   }
}

如果我們單擊**ALERT**按鈕，我們將看到警報對話方塊。

當我們單擊對話方塊按鈕時，以下輸出將顯示在控制檯上。

步驟 4B - 建立 Confirm 函式

我們需要建立的第二個函式是**dialogConfirm**函式。

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

按下**CONFIRM**按鈕時，新的對話方塊將彈出。

我們將單擊**YES**按鈕來回答問題。以下輸出將顯示在控制檯上。

步驟 4C - 建立 Prompt 函式

第三個函式是**dialogPrompt**函式。這允許使用者在對話方塊輸入元素中鍵入文字。

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

**PROMPT**按鈕將觸發一個對話方塊，如下面的螢幕截圖所示。

在此對話方塊中，我們有一個選項可以鍵入文字。我們將此文字記錄到控制檯，以及單擊的按鈕。

步驟 4D - 建立 Beep 函式

最後一個是**dialogBeep**函式。它用於呼叫音訊蜂鳴通知。**times**引數將設定蜂鳴訊號的重複次數。

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

當我們單擊**BEEP**按鈕時，我們將聽到通知聲音兩次，因為**times**值設定為**2**。