操纵jQuery Mobile页脚的位置 [英] Manipulate positioning of jQuery Mobile Footer

问题描述

我有一个已被查看的问题，但是对此问题没有任何答案或评论，因此我认为我将尝试简化我的问题.如果您对我的整体问题感到好奇，请访问以下链接: jQuery Mobile中的持久标头

I have a question that has been viewed, but with no answers or comments on the matter, so I thought I'd try to simplify my question. For those curious about my overall issue, please see the link: Persistent header in jQuery Mobile

无论如何，我的问题是如何强制JQM页脚位于顶部而不是底部?这是JQM页脚的代码.在页面过渡期间，它仍然可以正常运行，但是它位于页面的底部，我需要它放在顶部:

Anyways, my question is how can I force the JQM footer to be at the top instead of the bottom? Here's the code for the JQM footer. It persists fine across page transitions, but it is at the foot of the page and I need it at the head:

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

我已经在考虑用Sencha对其进行重建，但是由于我的截止日期是明天，所以我认为这是不可能的.此持久性标头是当前唯一丢失的内容(页面由于某种原因而转换时，JQM标头不会保留).

I'm already looking into rebuilding it with Sencha, but since I have a deadline of tomorrow, I don't think that's possible. This persistent header is the only thing missing at the moment (JQM headers don't stay when the page transitions for some reason).

推荐答案

我遇到了类似的问题.

在我的情况下，我希望页脚完全位于页面底部，因此我将页脚div包装到需要放置的新div中.

In my case I wanted the footer stay exactly in the bottom of the page so I wrapped the footer div into a new div positioned where I need to.

让代码说明一切:

<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;属性并在top: -header's height-px;中更改

In this way you can move the footer wrapper freely (as every other normal div, not managed by jQuery Mobile's css) for example, in your case, you have to delete the bottom: 0px; attribute and change it in top: -header's height-px;

希望对您有帮助！

这篇关于操纵jQuery Mobile页脚的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！