cordova-plugin-dialogs

Android Testsuite Chrome Testsuite iOS Testsuite Lint Test

這個外掛程式透過全域的 navigator.notification 物件提供對某些原生對話框 UI 元素的存取。

雖然該物件附加到全域範圍的 navigator，但在 deviceready 事件之後才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.notification);
}

安裝

cordova plugin add cordova-plugin-dialogs

方法

  • navigator.notification.alert
  • navigator.notification.confirm
  • navigator.notification.prompt
  • navigator.notification.beep
  • navigator.notification.dismissPrevious
  • navigator.notification.dismissAll

navigator.notification.alert

顯示自訂警示或對話框。大多數 Cordova 實作都使用原生對話框來實現此功能，但某些平台使用瀏覽器的 alert 函式，通常自訂性較低。

navigator.notification.alert(message, alertCallback, [title], [buttonName])

  • message: 對話框訊息。 (字串)

  • alertCallback: 警示對話框關閉時要呼叫的回呼函式。 (函式)

  • title: 對話框標題。 (字串) (選用，預設為 Alert)

  • buttonName: 按鈕名稱。 (字串) (選用，預設為 OK)

範例

function alertDismissed() {
    // do something
}

navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

navigator.notification.confirm

顯示可自訂的確認對話框。

navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])

  • message: 對話框訊息。 (字串)

  • confirmCallback: 按下按鈕時（1、2 或 3）或在沒有按下按鈕就關閉對話框時 (0) 要呼叫的回呼函式。 (函式)

  • title: 對話框標題。 (字串) (選用，預設為 Confirm)

  • buttonLabels: 指定按鈕標籤的字串陣列。 (陣列) (選用，預設為 [OK,Cancel])

confirmCallback

當使用者按下確認對話框中的其中一個按鈕時，會執行 confirmCallback。

回呼函式採用參數 buttonIndex (數字)，它是按下按鈕的索引。請注意，索引使用從 1 開始的索引，因此該值為 1、2、3 等。

範例

function onConfirm(buttonIndex) {
    alert('You selected button ' + buttonIndex);
}

navigator.notification.confirm(
    'You are the winner!', // message
     onConfirm,            // callback to invoke with index of button pressed
    'Game Over',           // title
    ['Restart','Exit']     // buttonLabels
);

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

Android 相關注意事項

  • Android 最多支援三個按鈕，並忽略超過此數量的按鈕。

  • Android 對話框標題不能超過 2 行內容，它將忽略超過此數量的內容。

Windows 相關注意事項

  • 在 Windows8/8.1 上，無法向 MessageDialog 實例新增三個以上的按鈕。

  • 在 Windows Phone 8.1 上，無法顯示超過兩個按鈕的對話框。

navigator.notification.prompt

顯示比瀏覽器的 prompt 函式更可自訂的原生對話框。

navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText])

  • message: 對話框訊息。 (字串)

  • promptCallback: 按下按鈕時（1、2 或 3）或在沒有按下按鈕就關閉對話框時 (0) 要呼叫的回呼函式。 (函式)

  • title: 對話框標題 (字串) (選用，預設為 Prompt)

  • buttonLabels: 指定按鈕標籤的字串陣列 (陣列) (選用，預設為 ["OK","Cancel"])

  • defaultText: 預設文字方塊輸入值 (字串) (選用，預設值：空字串)

promptCallback

當使用者按下提示對話框中的其中一個按鈕時，會執行 promptCallback。傳遞給回呼函式的 results 物件包含以下屬性

  • buttonIndex: 按下按鈕的索引。 (數字) 請注意，索引使用從 1 開始的索引，因此該值為 1、2、3 等。

  • input1: 在提示對話框中輸入的文字。 (字串)

範例

function onPrompt(results) {
    alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
}

navigator.notification.prompt(
    'Please enter your name',  // message
    onPrompt,                  // callback to invoke
    'Registration',            // title
    ['Ok','Exit'],             // buttonLabels
    'Jane Doe'                 // defaultText
);

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows

Android 相關注意事項

  • Android 最多支援三個按鈕，並忽略超過此數量的按鈕。

  • 在 Android 3.0 和更新版本上，對於使用 Holo 主題的裝置，按鈕會以相反的順序顯示。

Windows 相關注意事項

  • 由於缺少此原生 API，在 Windows 上提示對話框是基於 HTML 的。

navigator.notification.beep

裝置播放嗶聲。

navigator.notification.beep(times);
  • times: 重複播放嗶聲的次數。 (數字)

範例

// Beep twice!
navigator.notification.beep(2);

支援的平台

  • Android
  • 瀏覽器
  • iOS
  • Windows 8

Android 相關注意事項

  • Android 會播放在 設定/聲音與顯示 面板下指定的預設通知鈴聲。

navigator.notification.dismissPrevious

關閉先前開啟的對話框。如果目前沒有開啟任何對話框，將會呼叫 errorCallback。

navigator.notification.dismissPrevious([successCallback], [errorCallback])
  • successCallback: 先前開啟的對話框已關閉時要呼叫的回呼函式。 (函式) (選用)
  • errorCallback: 無法關閉先前開啟的對話框時要呼叫的回呼函式。將傳遞錯誤訊息。 (函式) (選用)

範例

function successCallback() {
    console.log("Successfully dismissed previously opened dialog.");
}

function errorCallback(error) {
    console.log("Failed to dismiss previously opened dialog: " + error);
}

navigator.notification.dismissPrevious(
    successCallback,
    errorCallback
);

支援的平台

  • Android
  • iOS

navigator.notification.dismissAll

關閉所有先前開啟的對話框。如果目前沒有開啟任何對話框，將會呼叫 errorCallback。

navigator.notification.dismissAll([successCallback], [errorCallback])
  • successCallback: 所有先前開啟的對話框都已關閉時要呼叫的回呼函式。 (函式) (選用)
  • errorCallback: 無法關閉所有先前開啟的對話框時要呼叫的回呼函式。將傳遞錯誤訊息。 (函式) (選用)

範例

function successCallback() {
    console.log("Successfully dismissed all previously opened dialogs.");
}

function errorCallback(error) {
    console.log("Failed to dismiss all previously opened dialogs: " + error);
}

navigator.notification.dismissAll(
    successCallback,
    errorCallback
);

支援的平台

  • Android
  • iOS