2017-08-18 7 views
0

HTML5stackで開発され、PhoneGap Buildで送信されるモバイルアプリ。 iOSデバイスでのテスト(4s & 5c)気付いたのは、クリックして新しいページに移動したときに、ヘッダーとメニューがロード間で空白になり、シームレスな外観が得られなくなったことに気付きました。ヘッダーやメニューをすべてのページで正確な位置に保つことでヘッダーやメニューのように見えるようにして、他のすべてが変更されたことを期待していました。私は誰かが私にAngularJSのような構造的フレームワークを使用するよう指示するだろうと推測しているが、私はそれを知らない。&は私が登っているこの急な学習曲線にはるかに多くの時間を費やすことができない。おそらく次のプロジェクト。ページをナビゲートするときにヘッダーと水平のメニューを一貫して作成する方法

下記の私のCSSコード。

#menu { 
    width: 100%; 
    position: fixed; 
    margin: 0px; 
    padding: 0px; 
} 

img.headerImg{ 
    width: 100%; 
    margin-top: 0%;  
    padding: 0px ;     
    vertical-align: top; 
} 

.menu, .table { 
    position: fixed; 
    width: 100%; 
    margin: 0% ; 
    padding: 0% ; 
    color: white; 
    background-color: #1E3B56; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    font-size: x-small; 
    border-bottom-right-radius: 20%; 
    border-top-left-radius: 5%; 
} 

.navImg { 
    width: 25px; 
    height: 25px; 
    align-items: center; 
    position: absolute;  
    margin: 0px 4px 0px 0px; 
    padding: 2px 2px 0px 0px; 
} 

うまくいけば、解決策はそこにありますが、私はそれと一緒に暮らすために持っている場合、私は今のところ...それと一緒に暮らす必要があります。

答えて

0

ハイブリッドモバイルアプリケーションを単一のページアプリケーションにしてjQuery Mobile data-role = "page"を使用してこの問題を解決しました。

私のプロジェクトを自分のプロジェクトに入れてこのテンプレートに入れ替えることはできましたが、次にコードをSPAのスターターとして使用する可能性が高いです。これは私が見つけた本当に便利なチュートリアルから来たYoutube from LinuxAcademy

あなたと私のためにhtmlスターターテンプレートを投稿する。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQyery Mobile - Fixed Header &amp; Footer</title> 
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<!--<div data-role="page" data-fullscreen="true"> // to show a full page w/hiding header/footer disappears and reappears --> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1>I'm your header</h1> 
<div data-role='navbar'><ul> 
<li><a href="" data-icon="delete">Nav 01</a></li> 
<li><a href="" data-icon="check" data-iconpos="bottom">Nav 02</a></li>    
</ul></div> 
</div><!-- /end header --> 
<div data-role="content"> 
<h1>I'm your content</h1> 
<p>Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! My Lord, You are so Wonderful. Thank you for all that you have done for me and my loved ones. You are incredibly gracious to have offered salvation to a lost world. You are good. And your mercies endureth forever! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! My Lord, You are so Wonderful. Thank you for all that you have done for me and my loved ones. You are incredibly gracious to have offered salvation to a lost world. You are good. And your mercies endureth forever! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet! Dominus meus: tu es ergo habet. Lorem quod fecisti mihi carissimi. Vos have ut misereatur sunt incredibili obtulerunt ut vetustus amissus utitur salute mundi. Quia bonus es tu. Et misericordias tuas usque in aeternum manet!</p> </div><!-- /end content --> 
<div data-role="footer" data-position="fixed"> 
<h1>I'm your footer</h1> 
<div data-role='navbar'> 
<ul> 
<li><a href="" data-icon="star">Nav 03</a></li> 
<li><a href="">Nav 04</a></li>    
</ul> 
</div></div><!-- /end footer -->   
</div> 
</body> 
</html> 
関連する問題