Cordova 對話框

這個插件將調(diào)用平臺本地對話框UI元素。

步驟1 - 安裝對話框

在命令提示符窗口中鍵入以下內(nèi)容以安裝此插件。

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 - 添加事件監(jiān)聽器

現(xiàn)在我們將在 index.js 中的 onDeviceReady 函數(shù)中添加事件監(jiān)聽器。一旦相應(yīng)的按鈕被點擊，監(jiān)聽器將調(diào)用回調(diào)函數(shù)。

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 - 創(chuàng)建警報功能

由于我們添加了四個事件監(jiān)聽器，我們現(xiàn)在將在 index.js 中為它們創(chuàng)建回調(diào)函數(shù)。第一個是 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 - 創(chuàng)建確認函數(shù)

我們需要創(chuàng)建的第二個函數(shù)是 dialogConfirm 函數(shù)。

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 按鈕時，將彈出新對話框。

我們將點擊是按鈕來回答問題。控制臺輸出將顯示以下內(nèi)容 -

步驟4C - 創(chuàng)建提示功能

第三個函數(shù)是 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 按鈕將觸發(fā)此對話框。

在此對話框中，我們有選擇鍵入文本。我們將在控制臺中記錄此文本以及單擊的按鈕。

步驟4D - 創(chuàng)建蜂鳴聲功能

最后一個是 dialogBeep 。這用于呼叫音頻蜂鳴聲通知。times 參數(shù)將設(shè)置蜂鳴聲信號的重復(fù)次數(shù)。

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

當我們點擊 BEEP 按鈕時，我們會聽到兩次通知聲音，因為次值設(shè)置為 2 。