मैं फोनगैप/कॉर्डोवा का उपयोग कर विंडोज फोन 7 के लिए एक सरल पैनोरामा एप्लिकेशन कैसे बना सकता हूं?

मैं चारों ओर देखा और विंडोज फोन 7 के लिए एचटीएमएल 5 अनुप्रयोगों PhoneGap/कॉर्डोबा आधारित के कई उदाहरण मिल गया है, लेकिन उनमें से कोई बताएंगे कि कैसे एक पैनोरमा या एक धुरी शैली एप्लिकेशन है, जो मुख्य ड्रॉ में से कुछ कर रहे हैं बनाने के लिए लगते हैं ओएस के यूआई के।मैं फोनगैप/कॉर्डोवा का उपयोग कर विंडोज फोन 7 के लिए एक सरल पैनोरामा एप्लिकेशन कैसे बना सकता हूं?

पैनोरमा:: मैं एक ऐप्लिकेशन है जो इस तरह के काम करता है के निर्माण के लिए देख रहा हूँ

Windows Phone 7 Panorama example

धुरी:

Windows Phone 7 Pivot example

मैं इन सादे HTML5, CSS3 का उपयोग कर क्षुधा का निर्माण करना चाहते और जेएस और उन्हें तैनात करने के लिए फोनगैप बिल्ड का उपयोग करें। मैं विजुअल स्टूडियो का उपयोग नहीं करना चाहता हूं। वी.एस. चित्रमाला या धुरी लेआउट के लिए दो अलग-अलग नियंत्रण प्रदान करता है, लेकिन एचटीएमएल 5 में, वहाँ सिर्फ एक स्लाइडर नियंत्रण है जो दोनों के लिए इस्तेमाल किया जा सकता है, एक ट्वीक के साथ पहली बार में 'दूसरे मद' पृष्ठ की तरह एक मल्टी-स्क्रीन स्तंभ के लिए अनुमति देने के लिए किया जाना चाहिए उदाहरण।

मैं भी कुछ IE9 संगत jQuery स्लाइडर प्लगइन्स कि मैं tweak सकता है के लिए देखा, लेकिन उनमें से 90% से काम नहीं करते और बाकी एक छोटे से बहुत अलग कोशिश करते हैं और अनुकूल करने के लिए कर रहे हैं। उदाहरण के लिए, यह jQuery page slide (sideways) transition प्रत्येक ब्राउज़र में ठीक काम करता है, लेकिन WP7 ब्राउज़र में मूल स्लाइड अप-प्रकार प्रभाव में गिरावट आती है।

मैं कई OSes लक्षित कर रहा हूं, लेकिन मैं सभी भर में एक ही इंटरफ़ेस को दोहराने के लिए नहीं करना चाहती। डेटा स्रोत सामान्य होगा, लेकिन मैं चाहता हूं कि वे प्रत्येक ओएस पर मूल रूप से डिज़ाइन किए गए एप्लिकेशन की तरह दिखें।

अद्यतन 1:

मिले a scroller/slider plugin है कि वास्तव में WP7 पर IE मोबाइल पर घटनाओं को छूने के लिए प्रतिक्रिया करता है, लेकिन यह प्रत्येक पैनल के किनारे है, जो पैनोरामा/धुरी का एक महत्वपूर्ण पहलू है पर ले नहीं करता है नियंत्रित करता है।

XUI भी चेक आउट किया गया है, जिसमें स्वाइप/टैप ईवेंट का पता लगाने के लिए स्वाइप नामक एक प्लगइन है, लेकिन "xui-ie-2.3.2.min.js" के साथ भी, नमूना आईई मोबाइल में बिल्कुल कुछ नहीं करता है।

अद्यतन 2:

निकटतम मैं कुछ खोजने की तरह इस होनहार jqMetro ऐड-ऑन है पर आए हैं। यह आपको पैनोरमा, पिवट और देशी दिखने वाले नियंत्रणों सहित एक पूर्ण-मेट्रो शैली प्रदान करता है, लेकिन सबसे विडंबना यह है कि स्वाइप फीचर्स आईई मोबाइल पर काम नहीं करते हैं, जिसका मतलब है कि यह फोनगैप एप्लिकेशन में काम नहीं करेगा । पिवट हेडिंग्स पर टैप करना उस दृश्य में ठीक काम करता है और स्विच करता है।

अद्यतन 3:

पूरी तरह संकर एप्लिकेशन विकास को दी! :-)

स्रोत

2012-07-15 aalaap

तो, क्या आप किसी के लिए ऐप लिखने के लिए कह रहे हैं? या आप जिस कोड में परेशानी कर रहे हैं वह कहां है? – robertc

मुझे HTML में पैनोरामा/पिवट शैली व्यवहार के साथ नमूना कोड की आवश्यकता है - यही मुझे लिखने/ढूंढने में परेशानी हो रही है। – aalaap

iScroll 4 (http://cubiq.org/iscroll-4) पर देखें जो आईओएस और एंड्रॉइड पर यह कार्यक्षमता प्रदान करता है, और टच-स्क्रीन आधारित डेस्कटॉप आईई में काम करता है, यह सुनिश्चित नहीं करता कि यह WP7 पर कैसे काम करेगा हालांकि मुझे लगता है कि यह मंच की भविष्यवाणी करता है। – Purpletoucan

समाधान वेब प्रौद्योगिकियों के उपयोगकर्ता परित्याग करने के लिए देशी-esque क्षुधा का निर्माण और जाने के लिए है इसके बजाय पूरी तरह से देशी। हाइब्रिड ऐप ढांचे बुराई हैं।

स्रोत

2017-01-04 12:59:21 aalaap

आप PhoneGap के अंदर पैनोरमा ऐसा नहीं कर सकते डिफ़ॉल्ट रूप से। हो सकता है कि आप कुछ एक्स-कंपैट जेएस-लिब को काम कर सकें जो काम करता है, लेकिन मैंने वास्तव में ऐसा नहीं देखा है जो विंडोज फोन पैनोरमा के रूप में अच्छा दिखता है।

लेकिन अगर आप एक पैनोरमा के अंदर कई PhoneGap पृष्ठों हो सकता है। मुझे आपको बताने दो कि कैसे। ध्यान दें कि यह समाधान एक्स-प्लैट संगत नहीं होगा।

multiple phonegaps in panorama

नीचे सबसे हाल ही में phonegap खींचो और इसे सेट अप के लिए इस लिंक प्रति - [ http://docs.phonegap.com/en/2.2.0/guide_getting-started_windows-phone_index.md.html#Getting%20Started%20with%20Windows%20Phone]।

एक नई परियोजना बनाएं, इसे "pgpanoramaplay" या ऐसा कुछ नाम दें।

"\ www \ index.html" को "\ www" निर्देशिका में कम से कम दो अन्य फ़ाइलों को कॉपी करें। मैंने अपना "30tolaunch.html", "dfwiki.html" और "devfish.html" नाम दिया।

कुछ बुनियादी सामग्री दिखाने के लिए सामग्री को चिह्नित करें। मेरे "\ www \ 30tolaunch.html" के लिए संशोधित एचटीएमएल बॉडी नीचे है।

<body> 
    <div class="app"> 
     <h1>30tolaunch</h1> 
     <div> 
      <p>30 Days to Launch an App</p> 
      <p>Great content</p> 
      <a href="http://bit.ly/30tolaunch">bit.ly/30tolaunch</a> 
     </div> 
    </div> 
    <script type="text/javascript" src="cordova-2.2.0.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body>

अब [दाएं माउस] प्रोजेक्ट, और पैनोरमा आइटम में जोड़ें। स्टार्टअप वस्तु

ओपन PanoramaPage1.xaml के रूप में उपयोग करने के लिए PanoramaPage1.xaml wmmanifest1.xaml बदलें PanoramaPage1.xaml

की डिफ़ॉल्ट नाम ले लो

। फोन की खाई के लिए संदर्भ में खींचने के लिए पेज के शीर्ष संशोधित रूप में

इस प्रकार PanoramaControl संशोधित इस प्रकार है। ध्यान दें कि मैंने मैन्युअल रूप से item.html को छोड़कर सभी .html पेजएक्स बनाया है जो पहले से मौजूद था।

<Grid x:Name="LayoutRoot"> 
    <controls:Panorama Title="phonegap"> 
     <!--Panorama item one--> 
     <controls:PanoramaItem Header="30tolaunch"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <my:CordovaView HorizontalAlignment="Stretch" 
        Margin="0,0,0,0" 
        x:Name="PGView4" 
        VerticalAlignment="Stretch" 
        StartPageUri="/app/www/30tolaunch.html" 
       /> 
      </Grid> 
     </controls:PanoramaItem> 

     <!--Panorama item one--> 
     <controls:PanoramaItem Header="index"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <my:CordovaView HorizontalAlignment="Stretch" 
        Margin="0,0,0,0" 
        x:Name="PGView" 
        VerticalAlignment="Stretch" 
       /> 
      </Grid> 
     </controls:PanoramaItem> 

     <!--Panorama item two--> 
     <controls:PanoramaItem Header="item2"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <my:CordovaView HorizontalAlignment="Stretch" 
        Margin="0,0,0,0" 
        x:Name="PGView2" 
        VerticalAlignment="Stretch" 
        StartPageUri="/app/www/devfish.html" 
       /> 
      </Grid> 
     </controls:PanoramaItem> 

    <controls:PanoramaItem Header="item3"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <my:CordovaView HorizontalAlignment="Stretch" 
        Margin="0,0,0,0" 
        x:Name="PGView3" 
        VerticalAlignment="Stretch" 
        StartPageUri="/app/www/dfwiki.html" 
       /> 
      </Grid> 
     </controls:PanoramaItem> 
    </controls:Panorama> 
</Grid>

डीबग, जाओ और आपको पृष्ठ को इस आलेख के शीर्ष पर चित्र के समान दिखाना चाहिए।

यदि आप पैनोरमा पृष्ठभूमि से मेल खाने के लिए फोनगैप पृष्ठों को स्टाइल करना चाहते हैं, तो ऊंचाई समायोजित करें, पृष्ठभूमि छवियों को हटाएं, जो भी हो, default.css आपका मित्र है। मार्क करें और आनंद लें!

स्रोत

2012-12-11 22:13:25

देर से उत्तर के लिए खेद है। मैं भी इस समस्या हुई है और यहां मेरे समाधान है: https://github.com/grohman/js-panorama

यह wp8 पर IE10 में काम करता है, यह भी WP7 पर काम करना चाहिए

स्रोत

2013-03-27 03:00:53 Grohman

मैं फोनगैप/कॉर्डोवा का उपयोग कर विंडोज फोन 7 के लिए एक सरल पैनोरामा एप्लिकेशन कैसे बना सकता हूं?

उत्तर

संबंधित मुद्दे