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

Question

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

Answer 1

这navbar必须在页脚 div 内和<h4>标签下方。演示http://jsfiddle.net/yyene/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>

Answer 2

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

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

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

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