Question

使用HTML5stack开发并通过PhoneGap Build发送的移动应用程序。在iOS设备上测试（4s和5c）。注意到当我单击导航到新页面时，我的标题和菜单在加载之间消失，给出了不太无缝的外观。我希望通过将标题和菜单保持在所有页面的确切位置，它看起来像标题和菜单保持原位，而其他一切都改变了。我猜有人会告诉我使用像AngularJS这样的结构框架，但我不知道它和＆amp;我正在爬上这条陡峭的学习曲线，不能再花费更多的时间。也许是下一个项目。

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

如何在浏览页面时使页眉和水平菜单保持一致

1 个答案: