Question

我有一个问题已被查看，但对此事没有答案或评论，所以我想我会尝试简化我的问题。对于那些对我的整体问题感到好奇的人，请参阅链接：Persistent header in jQuery Mobile

无论如何，我的问题是如何强制JQM页脚位于顶部而不是底部？这是JQM页脚的代码。它在页面转换过程中保持良好状态，但它位于页面底部，我需要它在头部：

<div data-role="footer" data-position="fixed" data-id="navBar" id="navigationBar">
    <img src="images/bgheader.png" />
</div>

我已经开始考虑用Sencha重建它，但由于我有明天的截止日期，我认为这不可行。此持久性标头是目前唯一缺少的（当页面由于某种原因转换时，JQM标头不会停留）。

Answer 1

我有类似的问题。

在我的情况下，我希望页脚完全停留在页面底部，所以我将页脚div包装到一个位于我需要的位置的新div中。

让代码说明一切：

<style> 
.footer-wrapper {

    position: absolute;
    bottom: 0px;
    width: 100%;
}
</style>

然后

<div class='footer-wrapper'>
    <div data-role='footer' >
        footer content blah blah blah
    </div>
</div>

通过这种方式，你可以自由地移动页脚包装器（就像所有其他普通div一样，不是由jQuery Mobile的css管理），在你的情况下，你必须删除bottom: 0px;属性并在{ {1}}

我希望它有所帮助！

Answer 2

在docs中声明：

在页脚是a的情况下   全局导航元素，你可以   希望它看起来固定到位   页面转换之间。这可以   通过使用持久性来完成   jQuery中包含的页脚功能   移动。

使页脚在两者之间保持原位   转换，添加data-id属性   到所有相关页面的页脚   并为每个使用相同的id值。   例如，通过添加   data-id =“myfooter”到当前页面   和目标页面，框架   将页脚锚固定在   页面动画期间的相同位置。

请注意：此效果仅适用   如果标题和正确工作   页脚工具栏设置为   data-position =“fixed”所以他们在   在过渡期间查看。

因此同样适用于标题。不是试图移动页脚，而是将标题固定为持久性。

我找到了一个示例here，在“将页脚和标题持久化”下。

Answer 3

我不认为这是可能的，至少不是通过使用JQM页脚。文档没有透露您可以设置的任何可以改变位置的属性，JQM正在积极管理<div>本身的位置。它将其直接修改为style='top: -1304px'，并且每次滚动或更改屏幕时都会更改值。所以，你甚至无法通过修改CSS来改变它。 JQM将永远获胜，因为它正在修改内联样式。

我认为你被困的主要原因是JQM给你一个假定的页面布局。您常用的导航控件假设位于屏幕的底部，屏幕顶部应在每个页面上显示不同的内容，可能还有后退按钮。这就是他们设想的方式，到目前为止，他们还没有开发出任何其他布局可能性。

您可以通过采用完全不同的方法来实现目标，但我们需要首先更清楚地定义您的目标。

祝你好运。希望您的利益相关者喜欢将固定元素放在屏幕底部。

Answer 4

将以下css添加到您的页面或css文件的底部。

请注意我尚未在移动设备上测试此代码..

 <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>

Answer 5

这对我有用。

在每个页面div中，包含一个带有数据角色“页脚”的div，如下所示。

<div data-role="page" id="something">
   <div data-role="footer" data-position="fixed" data-id="navFooter" 
      role="contentinfo" style="position:absolute;bottom:0;">
      <div data-role="navbar" role="navigation">
          ...
      </div>
   </div>
</div>

在我的应用中，内联样式阻止了在将内容添加到页面中间时向下推导杆，使用如下内容：

$('#contentDiv').append('<p>some html</p>');

不幸的是，必须在每个页面div中重复导航栏。

Answer 6

我在每个data-role =“page”中都取得了一些成功：

<div data-role="footer" data-id="page_header" class="fixed_header">
 <h1>My Page</h1>
</div>

的CSS：

.fixed_header {
    position:fixed !important;
    top:0px !important;
    left:0px;
    width:100%;
    z-index:1;
}

我实际上已经能够将第二个“真正的”页脚固定在页面底部。我在HTC Amaze和iOS模拟器上测试了这个。

我很想知道这是否适用于其他设备。

操纵jQuery Mobile Footer的定位

6 个答案: