我有一个问题已被查看,但对此事没有答案或评论,所以我想我会尝试简化我的问题。对于那些对我的整体问题感到好奇的人,请参阅链接: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标头不会停留)。
答案 0 :(得分:6)
我有类似的问题。
在我的情况下,我希望页脚完全停留在页面底部,所以我将页脚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}}
我希望它有所帮助!
答案 1 :(得分:2)
在docs中声明:
在页脚是a的情况下 全局导航元素,你可以 希望它看起来固定到位 页面转换之间。这可以 通过使用持久性来完成 jQuery中包含的页脚功能 移动。
使页脚在两者之间保持原位 转换,添加data-id属性 到所有相关页面的页脚 并为每个使用相同的id值。 例如,通过添加 data-id =“myfooter”到当前页面 和目标页面,框架 将页脚锚固定在 页面动画期间的相同位置。
请注意:此效果仅适用 如果标题和正确工作 页脚工具栏设置为 data-position =“fixed”所以他们在 在过渡期间查看。
因此同样适用于标题。不是试图移动页脚,而是将标题固定为持久性。
我找到了一个示例here,在“将页脚和标题持久化”下。
答案 2 :(得分:1)
我不认为这是可能的,至少不是通过使用JQM页脚。文档没有透露您可以设置的任何可以改变位置的属性,JQM正在积极管理<div>
本身的位置。它将其直接修改为style='top: -1304px'
,并且每次滚动或更改屏幕时都会更改值。所以,你甚至无法通过修改CSS来改变它。 JQM将永远获胜,因为它正在修改内联样式。
我认为你被困的主要原因是JQM给你一个假定的页面布局。您常用的导航控件假设位于屏幕的底部,屏幕顶部应在每个页面上显示不同的内容,可能还有后退按钮。这就是他们设想的方式,到目前为止,他们还没有开发出任何其他布局可能性。
您可以通过采用完全不同的方法来实现目标,但我们需要首先更清楚地定义您的目标。
祝你好运。希望您的利益相关者喜欢将固定元素放在屏幕底部。
答案 3 :(得分:1)
将以下css添加到您的页面或css文件的底部。
请注意我尚未在移动设备上测试此代码..
<style type="text/css">
.ui-header {
position: fixed !important;
top: 0 !important;
z-index: 99;
}
.ui-content {
margin-top: 35px;
}
</style>
答案 4 :(得分:1)
这对我有用。
在每个页面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中重复导航栏。
答案 5 :(得分:1)
我在每个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模拟器上测试了这个。
我很想知道这是否适用于其他设备。