标题 JQuery Mobile 中的导航栏

Navbar in Header JQuery Mobile

本文关键字：导航 JQuery Mobile 标题      更新时间：2023-09-26

编辑：我的临时解决方案是关闭所有转换并为每个标头使用不同的id。然后，您将获得持久工具栏，但没有过渡。没有过渡的工作示例

我在JQuery Mobile的标题中使用了一个持久的固定导航栏。我正在 3 个 html 文件之间导航，在第一个（主页）页面上没有问题，但在第二和第三页上，导航栏涵盖了一些内容。

导航栏

和标题的导航栏代码损坏的示例：

<div data-role="header" data-id="header" data-position="fixed">
        <h1>Page 1</h1>
        <a href="options.html" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" data-icon="home" data-iconpos="top"class="ui-btn-active ui-state-persist"  >Page1</a></li>
                <li><a href="#page2" data-icon="info" data-iconpos="top"  >Page2</a></li>
                <li><a href="#page3" data-icon="gear" data-iconpos="top" >Page3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

我在这里上传了一个问题的示例（页面在一个 html 文件中而不是三个 html 文件中）：损坏的导航栏

这是更新的：http://jsfiddle.net/LvuUX/2/

您对所有三个页面都有相同的data-id="header"，因为您正在使用multi-page template因此您不能使用相同的id multiple elements

编辑：http://jsfiddle.net/LvuUX/3/看起来 jQuery 在页面加载时没有使用正确的padding-top。要解决此问题，您只需使用修复padding-top即可data-role="content" 

<style type="text/css">
    .ui-page-header-fixed { padding-top: 5.9em; }
</style>

我认为您要做的与我遇到的问题相似。我有一个固定位置的导航栏，但我的页面内容隐藏在它下面。我通过将上边距应用于与导航栏高度相等的内容div 来解决问题。（即。我的内容div的边距顶部是50px，因为这是我导航栏的高度。

固定定位的元件从正常流程中移除。文档和其他元素的行为就像固定定位的元素不存在一样。

我希望我正确解释了你的问题。我只学习了3个月的html&css，但是当我看到你的问题时，我认为这可能会有所帮助。

相关文章：