प्रोग्रामेटिक रूप से डिजीट संवाद में एक फॉर्म कैसे बनाएं और प्रदर्शित करें?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि Dojo 1.7 का उपयोग करके संवाद के अंदर एक फॉर्म कैसे बनाएं और प्रदर्शित करें।

मैं अपने संवाद कुछ इस तरह देखना चाहते हैं: AMD

Answer 1

का उपयोग करते समय आप एक संवाद बनाने

सभी नमूनों मैंने देखा है यह मार्कअप का उपयोग करते हैं, लेकिन कोई भी, आप कर सकते हैं सामग्री के रूप में एक विजेट (उदाहरण के लिए एक फॉर्म) का उपयोग करें। तो, उदाहरण के लिए, तुम कर सकते हो:

require([ 
    "dijit/Dialog", 
    "dijit/form/Form", 
    "dijit/form/TextBox", 
    "dijit/form/Button", 
    "dojo/domReady!" 
], function(Dialog, Form, TextBox, Button) 
{ 
    var form = new Form(); 

    new TextBox({ 
     placeHolder: "Name" 
    }).placeAt(form.containerNode); 

    new Button({ 
     label: "OK" 
    }).placeAt(form.containerNode); 

    var dia = new Dialog({ 
     content: form, 
     title: "Dialog with form", 
     style: "width: 300px; height: 300px;" 
    }); 
    form.startup(); 
    dia.show(); 
});//~require 

require() डोजो द्वारा प्रदान की जाती है। यह निर्भरता (फॉर्म, संवाद इत्यादि) लोड करता है और फिर दिए गए फ़ंक्शन को चलाता है जो विजेट बनाता है। हालांकि, क्योंकि हम निर्भरताओं के बीच domReady! शामिल करते हैं, डोजो यह सुनिश्चित करता है कि डोम पूरी तरह से लोड हो और पहले तैयार हो।

क्योंकि मेरे पास उस कार्य में dia.show() भी है, तो संवाद वास्तव में पृष्ठ खोले जाने पर ही दिखाया जाएगा। मान लीजिए कि आपने अपने पृष्ठ पर कुछ बटन के बजाय क्लिक किया जाता है आप संवाद दिखाना चाहते थे दो:

require([ 
    "dijit/Dialog", 
    "dijit/form/Form", 
    "dijit/form/TextBox", 
    "dijit/form/Button", 
    "dojo/on",  // Added this! 
    "dojo/domReady!" 
], function(Dialog, Form, TextBox, Button, onEvent) 
{ 
    // ... as above, we create the dialog and form when the page loads 
    // but it remains hidden until we call dia.show() ... 
    form.startup(); 
    // dia.show(); Commented out this! 

    onEvent(document.getElementById("someButtonOnYourPage"), "click", 
     function() 
     { 
      dia.show(); 
     }); 
});//~require