सभी उपलब्ध स्थान का उपयोग कर सामग्री jQuery मोबाइल

साथ मैं jQuery मोबाइल + phonegap के साथ एक परियोजना है और मैं पाद लेख और सामग्री div के साथ कुछ मुद्दों है।सभी उपलब्ध स्थान का उपयोग कर सामग्री jQuery मोबाइल

एक बुनियादी jQuery मोबाइल पेज इस तरह दिखता है:

<div data-role="page" data-theme="b" id="map"> 

    <div data-role="header" data-theme="b" data-position="inline"> 
     <a href="#" data-rel="back" data-icon="arrow-l">Back</a> 
     <h1>MAP</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas"> 
    </div><!-- /content --> 

    <div data-role="footer" data-theme="d"> 
     <h4>TEST</h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

अब मैं सामग्री में गूगल मैप्स लोड करने के लिए तो मैं जावास्क्रिप्ट में इस का उपयोग कोशिश कर रहा हूँ:

$('div').live("pageshow", function() 
{ 
    var myOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
}

और यह है परिणाम:

Page with footer after content

समस्या यह है कि Foote आर नीचे करने के लिए छड़ी नहीं है जब तक आप विशेषता data-position="fixed" इस तरह निर्दिष्ट करें:

<div data-role="footer" data-theme="d" data-position="fixed"> 
    <h4>TEST</h4> 
</div><!-- /footer -->

यह ठीक है, लेकिन समस्या नक्शा jQuery मोबाइल नीचे करने के लिए पाद लेख लेने से पहले लोड कर रहा है है एक परिणाम है कि मैं इस राशि के रूप में, पेज:

Page with footer fixed

आप नक्शे केवल अंतरिक्ष से पहले यह नीचे करने के लिए ले जाया जाता है छोड़ दिया उपयोग करते हुए कहाँ देख सकते हैं।

मेरा प्रश्न .. क्या घटना मैं के लिए इंतजार करना चाहिए या मैं आदेश नक्शा लोड करने के लिए तो यह शीर्ष लेख और पाद के बीच सभी स्थान का उपयोग करेगा में अपने कोड में जोड़ने के लिए क्या जरूरत है?

स्रोत

2012-02-28 SERPRO

आपको किसी इवेंट के लिए प्रतीक्षा करने की जरूरत नहीं है, आप 100% चारों ओर कुछ करने के लिए .ui-content तत्व की ऊंचाई निर्धारित करने की आवश्यकता।

/*make sure the viewport is 100% height*/ 
html, body { 
    height : 100%; 
} 

/*make the page element 100% height*/ 
#map-page { 
    height : 100%; 
} 

/*specify a height for the header so we can line-up the elements, the default is 40px*/ 
#map-page .ui-header { 
    height : 40px; 
} 

/*set the content to be full-width and height except it doesn't overlap the header or footer*/ 
#map-page .ui-content { 
    position : absolute; 
    top  : 40px; 
    right : 0; 
    bottom : 30px; 
    left  : 0; 
} 

/*absolutely position the footer to the bottom of the page*/ 
#map-page .ui-footer { 
    position : absolute; 
    bottom : 0; 
    left  : 0; 
    width : 100%; 
    height : 30px; 
}

यहाँ एक डेमो है:: http://jsfiddle.net/jasper/J9uf5/2/

स्रोत

2012-02-28 17:09:39 Jasper

हाय .. आपके सुझाव के लिए धन्यवाद। अगर मैं उन सभी सीएसएस का उपयोग करता हूं तो एप्लिकेशन पागल हो जाता है और ठीक से काम नहीं करता है .. लेकिन अगर मैं केवल यह हिस्सा जोड़ता हूं: http://pastebin.com/JPUTjB0N यह jQuery मोबाइल के साथ खूबसूरती से काम करता है .. कृपया इसे चिह्नित करने के लिए अपना उत्तर संपादित करें सही के रूप में – SERPRO

समाधान के लिए धन्यवाद। मैं काफी समय से इसकी तलाश कर रहा था। – WhatsInAName

इस समाधान ने वास्तव में मुझे जेक्यूएम v1.2.0 के लिए मदद की। धन्यवाद! – themanatuf

यह एक भी काम करता है:

<html> 
<head> 
<meta name="viewport" id="viewport" 
    content="width=device-width, height=device-height, 
    initial-scale=1.0, maximum-scale=1.0, 
    user-scalable=no;" /> 
</head> 
<body> 
    .... 
    <div data-role="header" data-position="fixed"> 
    .... 
    <div data-role="footer" data-position="fixed"> 
    .... 
</body> 
</html>

स्रोत

2013-02-22 20:36:16 sherif

अच्छा ... दूसरों के लिए कुछ जोड़ा जानकारी के रूप में: ब्राउज़रों कि सीएसएस स्थिति का समर्थन में: निश्चित (सबसे डेस्कटॉप ब्राउज़र, iOS5 +, Android 2.2+, ब्लैकबेरी 6, और अन्य), टूलबार है कि "fixedtoolbar" प्लगइन का उपयोग किया जाएगा व्यूपोर्ट के ऊपर या नीचे के लिए तय किया गया है, जबकि पेज सामग्री बीच में आसानी से स्क्रॉल करता है। उन ब्राउज़रों में जो निश्चित स्थिति का समर्थन नहीं करते हैं, टूलबार पृष्ठ के शीर्ष या निचले हिस्से में प्रवाह में स्थित रहेंगे। , एक हेडर या फुटर पर इस व्यवहार को सक्षम करने के डेटा-स्थिति एक jQuery मोबाइल हेडर या फुटर तत्व को = "तय" विशेषता जोड़ें। – Badrush

यहाँ एक jQuery मोबाइल छद्म पेज के लिए 100% ऊंचाई को प्राप्त करने का एक विशुद्ध सीएसएस विधि है

<style> 
    #map{ 
     height: 0; 
    } 

    #map_canvas { 
     height: 100%; 
     padding: 0; 
     text-shadow: none; 
    } 
</style>

बस इस सीएसएस जोड़ने

स्रोत

2013-05-09 22:29:03

मुझे नहीं पता कि माता-पिता की ऊंचाई 0 क्यों बना रही है और चाहता था कि बच्चा 100% इस काम को बनाता है, लेकिन यह बहुत अच्छा काम करता है। – dk123

सभी उपलब्ध स्थान का उपयोग कर सामग्री jQuery मोबाइल

उत्तर

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