如何在不在页面底部的 div（页面的一部分）中添加 Jquery Mobile 导航栏？

Posted 2023-05-09

【中文标题】如何在不在页面底部的 div（页面的一部分）中添加 Jquery Mobile 导航栏？

【英文标题】：How to add Jquery Mobile navbar within a div (part of page) not at the bottom of page?

【发布时间】：2013-06-23 07:31:07

【问题描述】：

我正在开发 App Builder Web 应用程序。在我的页面中心有一个 DIV，它就像一个移动屏幕，我在其上拖放不同的 Jquery Mobile 小部件并对这些小部件进行排序以构建我的应用程序。但问题是当我添加 NAVBAR (data-role="navbar") html DOM 进入目标 div 但它出现在我的网页底部。请参阅屏幕截图。因为有任何方法可以在 div 中显示它（没有 ifram）。

【问题讨论】：

如果您能够提供代码，那么我们会为您找到解决方案。

【参考方案1】：

此 navbar 必须在页脚 div 内和 <h4> 标记之下。演示http://jsfiddle.net/yeyene/Rdfxs/16/

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>

    <div data-role="content">
        <p>Page content goes here</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
        <div data-role="navbar" data-grid="c">
            <ul>
                <li><a href="#" class="ui-btn-active">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
                <li><a href="#">Four</a></li>
            </ul>
        </div><!-- /navbar -->
    </div>
</div>

【参考方案2】：

我建议您使用Sigma Mobility平台http://sigmamobility.com 通过简单的拖放功能和堆叠组件的实时预览，您可以使用 jQuery 组件创建移动应用程序。

对于您的问题，您需要将导航栏放在页脚内；这将把它带到底部。其他选项是为导航栏设置内联 css3：

#navbarid:
position:absolute;
bottom:0px;
 

这会将导航栏移动到底部，但不建议这样做，因为如果上层控件关闭它可能会与导航栏重叠。