Córdoba - Diálogos

El complemento Cordova Dialogs llamará al elemento de interfaz de usuario de diálogo nativo de la plataforma.

Paso 1: diálogo de instalación

Escriba el siguiente comando en el command prompt ventana para instalar este complemento.

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

Paso 2: agregar botones

Abramos ahora index.html y agregue cuatro botones, uno para cada tipo de diálogo.

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

Paso 3: agregar oyentes de eventos

Ahora agregaremos los oyentes de eventos dentro del onDeviceReady funcionar en index.js. Los oyentes llamarán a la función de devolución de llamada una vez que se haga clic en el botón correspondiente.

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

Paso 4A - Crear función de alerta

Como agregamos cuatro detectores de eventos, ahora crearemos las funciones de devolución de llamada para todos ellos en index.js. El primero esdialogAlert.

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

Si hacemos clic en el ALERT , veremos el cuadro de diálogo de alerta.

Cuando hacemos clic en el botón de diálogo, la siguiente salida se mostrará en la consola.

Paso 4B - Crear función de confirmación

La segunda función que necesitamos crear es la dialogConfirm función.

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

Cuando el CONFIRM se presiona el botón, aparecerá el nuevo cuadro de diálogo.

Haremos clic en el YESbotón para responder a la pregunta. La siguiente salida se mostrará en la consola.

Paso 4C - Crear función de aviso

La tercera función es la dialogPromptfunción. Esto permite a los usuarios escribir texto en el elemento de entrada del diálogo.

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

los PROMPT El botón activará un cuadro de diálogo como en la siguiente captura de pantalla.

En este cuadro de diálogo, tenemos una opción para escribir el texto. Registraremos este texto en la consola, junto con un botón en el que se hace clic.

Paso 4D - Crear función de pitido

El ultimo es el dialogBeepfunción. Se utiliza para llamar a la notificación de pitido de audio. lostimes El parámetro establecerá el número de repeticiones de la señal de pitido.

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

Cuando hacemos clic en el BEEP , escucharemos el sonido de notificación dos veces, ya que el times el valor se establece en 2.