导航页面时如何使页眉和水平菜单保持一致
Posted
技术标签:
【中文标题】导航页面时如何使页眉和水平菜单保持一致【英文标题】：How to Make Header and Horizontal Menu Consistent When Navigating Pages 【发布时间】：2017-08-18 19:51:56 【问题描述】：使用 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;
希望，有一个解决方案，但如果我必须忍受它，那么我必须忍受它......现在。
【问题讨论】：
【参考方案1】：我通过将混合移动应用程序制作为单页应用程序并使用 jQuery Mobile data-role="page" 解决了这个问题。
虽然我的项目太远了，无法将我的代码转移到这个模板中，但我下次可能会使用下面的代码作为 SPA 启动器。这来自我在 Youtube from LinuxAcademy 上找到的一个非常有用的教程
为你和未来的我发布 html 入门模板。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQyery Mobile - Fixed Header & 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>
【讨论】：
以上是关于导航页面时如何使页眉和水平菜单保持一致的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jQueryMobile 中跨页面保持相同的页眉/页脚？