javascript – Header JQuery Mobile中的Navbar

2023年3月9日 214次阅读

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

working example without transitions

我在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文件中)：broken navbar

最佳答案 这是更新的：

http://jsfiddle.net/LvuUX/2/

所有三个页面都有相同的data-id =“header”,因为您使用的是多页模板,因此多个元素的ID不能相同

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

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