विंडोज फोन पर WinJS.UI.Flyout एचटीएमएल 8.1

Question

मैं एक इनपुट इनपुट क्षेत्र के साथ WinJS.UI.Flyout बनाने की कोशिश कर रहा हूं और एक बटन को उपयोगकर्ता को इनपुट फ़ील्ड में एक नया मान दर्ज करने की अनुमति देता है और इसे सहेजने के लिए बटन पर क्लिक करता हूं । हालांकि, विंडोज फोन 8.1 पर, फ्लाईआउट समर्थित नहीं हैं।

मैं इसके आसपास कैसे काम कर सकता हूं? फोन 8.1 पर WinJS.UI.Flyout घटक के व्यवहार की नकल करने का कोई तरीका है?

अग्रिम धन्यवाद।

Answer 1

यहां आर्किटेक्चर पर व्यक्तिगत राय, लेकिन मेरा मानना ​​है कि यदि आपके पास एक एपीआई है जो संकेत देता है, और आप चाहते हैं कि लोग वास्तव में इसका उपयोग करें, तो आपको यह सुनिश्चित करना होगा कि यह सभी वातावरण में समर्थित है।

यहाँ मैं क्या Flyouts के लिए उपयोग करते हैं (जो मैं पॉप-अप कस्टम के रूप में उपयोग पृष्ठ से दूर उपयोगकर्ता नेविगेट नहीं कि करते संकेत देता है):

default.css:

/* Used to help emulate the Flyout when on a Windows Phone device. */ 
.matting { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 999; 
    background-color: black; 
    opacity: 0.6; 
    display: none; 
} 

/* Applied when forcing a Flyout on a Windows Phone device. */ 
/* Removed when hiding it. */ 
/* Creates it like a WP dialog. */ 
.wp-flyout { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    /* The height should be left alone. */ 
    z-index: 1000; 
    display: block; 
    opacity: 1.0; 
    background-color: dimgray; 
} 

एचटीएमएल में, इस WinJS.UI.Flyout divs के साथ में डाल दिया:

<div id="matting" class="matting"></div> 

Javascri में pt, तैयार और अनलोड मुख पृष्ठ में कार्यों को परिभाषित के साथ-साथ, मैं निम्नलिखित दो अतिरिक्त कार्य है:

// Shows a flyout, even on Windows Phone. 
    // flyoutId is the WinJS.UI.Flyout structure. 
    // launchButtonId is the button that is launching this flyout. 
    Flyout: function (flyoutId, launchButtonId) { 
     var flyoutElement = document.getElementById(flyoutId); 
     if (flyoutElement.winControl) { 
      // Windows. 
      var launchButton = document.getElementById(launchButtonId); 
      flyoutElement.winControl.show(launchButton); 
     } else { 
      // Windows Phone. 
      // Fake it with a dialog. 
      var flyout = WinJS.Utilities.query("#" + flyoutId); 
      // Show the matting. 
      var matting = WinJS.Utilities.query("#matting"); 
      matting.setStyle("display", "block"); 
      // Apply click-cancel to the matting. 
      matting[0].cancel = function() { that.UnFlyout(flyoutId); return true; }; 
      matting.listen("click", matting[0].cancel, false); 
      // Apply the wp-flyout class. 
      flyout.addClass("wp-flyout"); 
      // Add back-button-cancel event. 
      WinJS.Application.addEventListener("backclick", 
       matting[0].cancel); 
      // Show the flyout. 
      flyout.setStyle("display", "block"); 
     } 
    }, 

    // Hides a flyout, even on Windows Phone. 
    UnFlyout: function (flyoutId) { 
     var flyoutElement = document.getElementById(flyoutId); 
     if (flyoutElement.winControl) { 
      // Windows. 
      flyoutElement.winControl.hide(); 
     } else { 
      // Windows Phone. 
      // We're faking it with a dialog. 
      var flyout = WinJS.Utilities.query("#" + flyoutId); 
      // Hide the flyout. 
      flyout.setStyle("display", "none"); 
      // Remove the wp-flyout class. 
      flyout.removeClass("wp-flyout"); 
      // Remove the click-cancel from the matting. 
      var matting = WinJS.Utilities.query("#matting"); 
      matting.removeEventListener("click", matting[0].cancel, false); 
      // Remove back-button-cancel event. 
      WinJS.Application.removeEventListener("backclick", 
       matting[0].cancel); 
      // Hide the matting. 
      matting.setStyle("display", "none"); 
     } 
    } 

नोट है कि मैं लोकप्रिय का उपयोग करें "है कि इस =," तैयार() फ़ंक्शन में, "var that;" के साथ एक मानक नेविगेशन सार्वभौमिक ऐप में परिभाषित होम पेज के ऊपर।

नेट परिणाम: HTML में सामान्य के रूप में अपने फ्लाईआउट बनाएं। आप एक flyout चाहते हैं, तो आप सिर्फ फोन:

that.Flyout("flyoutId", "launchButtonId"); 

यह विंडोज में हमेशा की तरह फ़्लायआउट दिखाई देगा, लेकिन विंडोज फोन पर अब एक WP संवाद (या यह करने के लिए पर्याप्त पास) के रूप में फ़्लायआउट दिखाएगा। आप ठीक है, तो/रद्द/आदि बटन flyout में, सुनिश्चित करें कि आप कॉल करें:

that.UnFlyout("flyoutId"); 

सामान्य ".hide()" के स्थान पर।

इसके साथ खेलने के लिए स्वतंत्र महसूस करें, और अगर आपको कोई सुधार है तो मुझे बताएं।

Answer 2

मुझे नहीं लगता कि इसके लिए एक नियंत्रण है ... और मुझे नहीं लगता कि मैं इसे फोन पर चाहूंगा। दिनांक & कैलेंडर ऐप से समय पिकर्स पर नज़र डालें, वे आपके डेटा को इनपुट करने के लिए आपको एक नए 'पृष्ठ' पर ले जाते हैं।

आप जो करना चाहते हैं वह मानक HTML के साथ प्राप्त किया जा सकता है, लेकिन मुझे यकीन नहीं है कि मैं इसे चाहता हूं।

उन मामलों में मैं अपने उपयोगकर्ताओं को एक नए पृष्ठ पर ले जा रहा हूं जहां वे आवश्यक डेटा दर्ज करते हैं।