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

Question

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

Answer 1

此navbar必须位于页脚div＆amp;低于<h4>标记。 DEMO 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>

Answer 2

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

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

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

这会将导航栏移动到底部，但不推荐使用，因为如果关闭导航栏，则上部控件可能与导航栏重叠。