Cordova-대화 상자

Cordova Dialogs 플러그인은 플랫폼 기본 대화 UI 요소를 호출합니다.

1 단계-설치 대화 상자

다음 명령을 입력하십시오. command prompt 이 플러그인을 설치하는 창.

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

2 단계-버튼 추가

이제 열자 index.html 모든 유형의 대화 상자에 하나씩 4 개의 버튼을 추가합니다.

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

3 단계-이벤트 리스너 추가

이제 이벤트 리스너를 onDeviceReady 기능 index.js. 리스너는 해당 버튼을 클릭하면 콜백 함수를 호출합니다.

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 단계-경고 기능 만들기

4 개의 이벤트 리스너를 추가 했으므로 이제 모든 리스너에 대한 콜백 함수를 생성합니다. 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 단계-확인 기능 생성

우리가 만들어야하는 두 번째 함수는 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 단계-프롬프트 기능 생성

세 번째 기능은 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 단계-경고음 기능 만들기

마지막 것은 dialogBeep함수. 이것은 오디오 비프 알림을 호출하는 데 사용됩니다. 그만큼times 파라미터는 신호음의 반복 횟수를 설정합니다.

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

클릭하면 BEEP 버튼을 누르면 알림 음이 두 번 들립니다. times 값이 2.