Cordova 對(duì)話框

這個(gè)插件將調(diào)用平臺(tái)本地對(duì)話框UI元素。

步驟1 - 安裝對(duì)話框

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

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

步驟2 - 添加按鈕

讓我們打開(kāi) index.html 并添加四個(gè)按鈕，每個(gè)對(duì)話框都有一個(gè)按鈕。

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

步驟3 - 添加事件監(jiān)聽(tīng)器

現(xiàn)在我們將在 index.js 中的 onDeviceReady 函數(shù)中添加事件監(jiān)聽(tīng)器。一旦相應(yīng)的按鈕被點(diǎn)擊，監(jiān)聽(tīng)器將調(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)建警報(bào)功能

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

如果我們點(diǎn)擊 ALERT 按鈕，我們將看到警報(bào)對(duì)話框。

當(dāng)我們單擊對(duì)話框按鈕，我們將獲得控制臺(tái)輸出。

步驟4B - 創(chuàng)建確認(rèn)函數(shù)

我們需要?jiǎng)?chuàng)建的第二個(gè)函數(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!");
   }
	
}

當(dāng)按下 CONFIRM 按鈕時(shí)，將彈出新對(duì)話框。

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

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

第三個(gè)函數(shù)是 dialogPrompt 。它允許用戶(hù)在對(duì)話框輸入元素中鍵入文本。

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ā)此對(duì)話框。

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

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

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

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

當(dāng)我們點(diǎn)擊 BEEP 按鈕時(shí)，我們會(huì)聽(tīng)到兩次通知聲音，因?yàn)?strong>次值設(shè)置為 2 。