Question

我想使用jqm和Phonegap创建一个新的移动应用程序;我不明白如何获得在每次更改页面时都没有重新创建的固定标头。

这是jqm用于ajax调用的经典代码;但在每种情况下都会重新加载标题。

<!-- Start of first page -->

<div data-role="header">
    <h1>First</h1>
</div><!-- /header -->

<div data-role="content">    
    <p>The content</p>        
    <p>View internal page called <a href="#second">second</a></p>    
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

<div data-role="header">
    <h1>Second</h1>
</div><!-- /header -->

<div data-role="content">    
    <p>I'm the second content</p>        
    <p><a href="#first">Back to first</a></p>    
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

我不喜欢过渡效果;我只想修复标题（与本机应用程序相似）。

我看到了一些使用Phonegap的应用程序示例，其中的标题在每个页面的更改时都没有重新加载。

你能帮助我吗？

Answer 1

查看下一个链接http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/navbar/footer-persist-a.html

您只需要添加data-id和data-position =“fixed”：

<div data-role="header" data-id="my-header" data-position="fixed">

您可以在此处试用：http://jsfiddle.net/dima_k/uwfHJ/

Answer 2

Dima Kuzmich是对的。为了扩展他所说的内容，有几件事对我们来说非常重要。

标题的data-id属性必须在每页中具有相同的值，并且需要持久性。
data-position =“fixed”。

此外，看起来您可以为每个页面的持久标题设置不同的主题，并且它仍然会在没有过渡的情况下持续存在;它只是改变了主题。

jQuery Mobile，Phonegap和持久标头

2 个答案: