कॉर्डोवा - संवाद

कॉर्डोवा डायलॉग्स प्लगइन प्लेटफॉर्म को मूल डायलॉग UI तत्व कहेगा।

चरण 1 - संवाद स्थापित करना

में निम्न कमांड टाइप करें command prompt विंडो इस प्लगइन को स्थापित करने के लिए।

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 - इवेंट श्रोताओं को जोड़ें

अब हम ईवेंट श्रोताओं को अंदर जोड़ेंगे 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);

चरण 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 बटन, हमें अलर्ट डायलॉग बॉक्स मिलेगा।

जब हम संवाद बटन पर क्लिक करते हैं, तो निम्न आउटपुट कंसोल पर प्रदर्शित होगा।

स्टेप 4 बी - कन्फर्म फंक्शन बनाएं

दूसरा फ़ंक्शन जिसे हमें बनाने की आवश्यकता है वह है 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