İçerik jQuery Mobile ile kullanılabilir tüm alanı kullanarak

jQuery Mobile + phonegap ile bir projem var ve altbilgi ve içerik div ile ilgili bazı sorunlarım var.İçerik jQuery Mobile ile kullanılabilir tüm alanı kullanarak

Temel jQuery Mobile sayfa şuna benzer:

Şimdi

<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 -->

yüzden ben JavaScript bu kullanmak içeriğinde google maps yüklemeye çalışıyorum:

$('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); 
}

Ve bu sonuç:

Page with footer after content

sorun Foote olmasıdır Böyle niteliği data-position="fixed" belirtmedikçe r dibine yapışmaz:

Bunu alabilir sonucunda güzel ama sorun haritası altına Altbilgiyi çeken mobil jquery önce yükleniyor olan

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

sayfa: yalnızca bu dibe götürülmeden önce sol boşluk kullanarak haritayı görebilirsiniz

Page with footer fixed

Sorum şu: .. hangi etkinliği beklemeli veya eşleme ile altbilgi arasındaki tüm alanı kullanacak şekilde haritayı yüklemek için koduma ne eklemem gerekiyor?

kaynak

2012-02-28 SERPRO

Bir etkinlik için beklemenize gerek yok, .ui-content öğesinin boyunu 100% civarı bir şeye ayarlamanız gerekiyor. Bir demo İşte

/*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; 
}

edilir: http://jsfiddle.net/jasper/J9uf5/2/

kaynak

2012-02-28 17:09:39 Jasper

Merhaba .. Öneriniz için teşekkürler. Ben tüm bu CSS kullanırsanız, uygulama çıldırır ve düzgün çalışmaz .. ama bu kısmı eklesem: http://pastebin.com/JPUTjB0N jQuery Mobile ile güzel çalışır .. Lütfen cevabınızı düzenlemek için düzenleyin doğru olarak – SERPRO

Çözüm için teşekkürler. Bunu uzun zamandır arıyordum. – WhatsInAName

Bu çözüm jQM v1.2.0 için gerçekten bana yardımcı oldu. Teşekkür ederim! – themanatuf

Bu seferki de çalışır:

<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>

kaynak

2013-02-22 20:36:16 sherif

Güzel ... diğerleri için bazı ek bilgiler: CSS konumunu destekleyen tarayıcılarda: sabit (çoğu masaüstü tarayıcı, iOS5 +, Android 2.2+, BlackBerry 6 ve diğerleri), "fixedtoolbar" eklentisini kullanan araç çubukları sayfa içeriği aralarında serbestçe gezinirken, görünümün altına veya altına sabitlenir. Sabit konumlandırmayı desteklemeyen tarayıcılarda, araç çubukları sayfanın üstündeki veya altındaki akışta konumlandırılacaktır. Bu davranışı bir üstbilgi veya altbilgi üzerinde etkinleştirmek için, veri konumu = "sabit" özniteliği bir jQuery Mobile üstbilgisine veya altbilgi öğesine ekleyin. – Badrush

İşte

bir jQuery Mobile sözde sayfası için 100% yüksekliği elde etme saf CSS yöntemidir

Sadece bu css ekleyin:

<style> 
    #map{ 
     height: 0; 
    } 

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

kaynak

2013-05-09 22:29:03

Neden ebeveyn yüksekliğini 0 yapma ve çocuk% 100 bu işi yapmak istediğimi anlamıyorum, ama bu harika çalışıyor. – dk123

İçerik jQuery Mobile ile kullanılabilir tüm alanı kullanarak

cevap

İlgili konular