导航页面时如何使 Header 和水平菜单保持一致

Question

使用 HTML5stack 开发并通过 PhoneGap Build 发送的移动应用程序。在 iOS 设备（4s 和 5c）上测试。请注意，当我单击导航到新页面时，我的 header 和菜单在加载之间空白，呈现出不那么无缝的外观。我希望通过将 header 和菜单保持在所有页面的确切位置，看起来 header 和菜单保持原位，而其他一切都发生了变化。我猜有人会告诉我使用像 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;
}

希望有一个解决方案，但如果我必须忍受它，那么我必须忍受它......现在。

Answer 1

我通过将混合移动应用程序变成单页应用程序并使用 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>

导航页面时如何使 Header 和水平菜单保持一致

How to Make Header and Horizontal Menu Consistent When Navigating Pages

html

css

iphone

phonegap-build