操纵 jQuery Mobile 页脚的位置

发布于 2024-11-14 12:00:16 字数 532 浏览 2 评论 0原文

我有一个问题已被查看，但没有对此问题的答案或评论，所以我想我应该尝试简化我的问题。对于那些对我的整体问题感到好奇的人，请参阅链接：jQuery Mobile 中的持久标头

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

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

我已经在考虑用 Sencha 重建它，但由于我明天有最后期限，我认为这不是可能的。这个持久标头是目前唯一缺少的东西（当页面由于某种原因转换时，JQM 标头不会保留）。

原文

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

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>

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).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

○愚か者の日 2024-11-21 12:00:16

我有类似的问题。

就我而言，我希望页脚完全位于页面底部，因此我将页脚 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 ; 属性并在 top: -header's height-px; 中更改它，

希望有帮助！

I had a similar issue.

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.

Let the code speak for itself:

<style> 
.footer-wrapper {

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

then

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

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;

I hope it helps!

回复收藏 0 原文

送舟行 2024-11-21 12:00:16

在文档中指出：

在页脚是
全局导航元素，您可以
希望它看起来固定在适当的位置
之间的页面转换。这可以是
通过使用持久性来完成
jQuery 中包含的页脚功能
移动设备。
使页脚保持在
转换，添加 data-id 属性
到所有相关页面的页脚
并为每个使用相同的 id 值。
例如，通过添加
data-id="myfooter" 到当前页面
以及目标页面、框架
将使页脚锚点保持在
页面动画期间的同一位置。
请注意：此效果只会
如果标题和
页脚工具栏设置为
data-position="fixed" 所以它们在
转换期间的视图。

所以这同样适用于标题。不要尝试移动页脚，而是将页眉固定为持久的。

我在此处找到了一个示例，在使页脚和页眉持久化下。

回复收藏 0 原文

呢古 2024-11-21 12:00:16

我认为这是不可能的，至少通过使用 JQM 页脚是不可能的。该文档没有透露您可以设置的任何会更改位置的属性，并且 JQM 正在主动管理

本身的位置。它直接将其修改为 style='top: -1304px' 之类的内容，并且每次滚动或更改屏幕时它都会更改值。所以，你甚至不能通过修改 CSS 来改变它。 JQM 永远会赢，因为它修改了内联样式。

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

您也许可以通过采取完全不同的方法来实现您的目标，但我们首先需要对您的目标有一个更清晰的定义。

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

回复收藏 0 原文

风苍溪 2024-11-21 12:00:16

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

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

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

Add the following css to your page or to the bottom of the css file.

Please note I have not tested this code on mobile devices..

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

回复收藏 0 原文

情泪▽动烟 2024-11-21 12:00:16

这对我有用。

在每个页面 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 中重复。

This worked for me.

Inside each page div, include a div with data-role "footer", as below.

<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>

The inline style, in my app, prevented the navbar from being pushed down when content is added to the middle of the page, using something like this:

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

It's unfortunate that the navbar must be repeated in each page div.

回复收藏 0 原文

牵强ㄟ 2024-11-21 12:00:16

我在每个 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 模拟器上对此进行了测试。

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

I've had some success with this, inside of each 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;
}

And I've actually been able to have a second "real" footer, as well, fixed to the bottom of the page. I've tested this on my HTC Amaze, and the iOS simulator.

I would be interested to know if this is working on other devices.

回复收藏 0 原文

~没有更多了~