jQuery Mobile中的持久标头 [英] Persistent header in jQuery Mobile
问题描述
无法想出一个方法来处理我的旧问题，所以我要重新发布它，因为它可能是一个bug。
短版：我希望PhoneGap + JQM应用程序中的持久化标题可以在页面转换之间保持原位（从不移动），就像页脚可以设计的那样。
长版本：首先，我完全不熟悉jQuery和JQM，所以请指出我所做的任何newb错误。
我试图获得一个持续存在的头文件在应用程序的不同页面之间。它必须像用户在页面之间转换时保持不变的页脚一样。使用data-role =footerdata-id =（某些一致的id）data-position =fixed来实现持久页脚。它工作得很好（随机故障随着它错位，几秒钟后自动修复）。有关我在寻找什么的更多信息，请参阅此处的持久页脚：
http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html
在下面的链接中查看持久页脚的示例。看看如何选择页脚中的项目过渡到全新的页面，但页脚不移动：
http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html
现在我正在尝试做同样的事情，但我希望它位于应用程序的顶部而不是底部。我已经尝试了以下事情：
每页上的HTML：
< div data-role =footerdata -position =fixeddata-id =header>
< img src =images / bgheader.png/>
< / div>
JavaScript：
$ （'div.ui-footer'）.css（'top'，'0px'）;
$（'div.ui-footer-fixed'）.css（'top'，'0px'）;
$（'div.fade'）。css（'top'，'0px'）;
$（'div.ui-fixed-overlay'）。css（'top'，'0px'） ;
$（'div.ui-bar-a'）.css（'top'，'0px'）;
- 使用data-role =header（不会像footer那样持续）。虐待创建我想要的标题（因为我忽略了一些CSS），但是当我在页面之间转换时，它不会将标题保留在顶部。 JQM文档还没有声明它们支持持久标头，但它表明它支持持久页脚：
$ b $ p每页上的HTML：
< div data-role =headerdata-position =fixeddata-id =headerid = headerdata-backbtn =false>
< img src =images / bgheader.png/>
< / div>
解决方案几天，谷歌一度没有帮助。我终于想出了以下解决方案。它在转换开始之前将标题HTML复制到新页面，然后在转换完成后从上一页中删除代码。页眉和页脚仍然会随着页面转换而移动，但即使在浏览嵌套列表时它们也会保留。
//动态移动加载事件页面之间的页眉和页脚
$（'div.ui-page'）。live（'pagebeforeshow'，function（event，ui）{
//避免在第一个页面上复制页眉页面加载
if（ui.prevPage.length == 0）return;
//删除jQuery Mobile生成的头文件
$（'。ui-header'）。 addClass（'to-remove-now'）;
$（'＃header'）。removeClass（'to-remove-now'）;
$（'。to-remove-now'）。 remove（）;
//从当前页眉和页脚获取代码
header = $（'＃header'）[0] .outerHTML;
footer = $（ '#footer'）[0] .outerHTML;
//将现有页眉和页脚标记为删除
$（'＃header'）。addClass（'to-remove'）;
$（'＃footer'）。addClass（'to-remove'）;
//在头部前面呃并追加页脚到生成的HTML
event.currentTarget.innerHTML = header + event.currentTarget.innerHTML +页脚;
}）;
$ b $ //从上一页删除标题
$（'div.ui-page'）。live（'pagehide'，function（event，ui）{
$（' .to-remove'）。remove（）;
}）;
然后只需添加
id =header添加到页头div并将id =footer添加到页脚中，并将它们放置在您的内容中。Couldn't figure out a way to put a bounty on my old question, so I'm reposting it because maybe it was a bug.
Short version: I want a persistent header in a PhoneGap+JQM application that stays in-place (never moves) between page transitions like the footer can be designed to do.
Long version: First off, I'm totally new to jQuery and JQM, so please point out any newb mistakes I've made.
I'm trying to get a header that persists between different pages in the application. It would have to be like the persistent footer that stays in place whenever the user is transitioning between pages. The persistent footer was achieved using data-role="footer" data-id="(some consistent id)" data-position="fixed". It worked fairly well (random glitches with it getting misplaced then automatically fixing itself after a couple seconds). For more information on what I'm looking for, see "Persistent Footer" here: http://jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html
And see the example of the persistent footer at the link below. See how selecting an item in the footer transitions to a completely new page, yet the footer doesn't move: http://jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html
Now I'm trying to do the same thing, but I want it to be at the top of the application instead of the bottom. I've tried the following things:
- Shifting the footer to the top of the page (don't know what tag to catch in jQuery. Tried div.(jQuery class) utilizing several jQuery classes, but none work. I used FireBug to determine it is the "top" CSS attribute that needs to be changed.
The HTML on each page:
<div data-role="footer" data-position="fixed" data-id="header"> <img src="images/bgheader.png" /> </div>The JavaScript:
$('div.ui-footer').css('top', '0px'); $('div.ui-footer-fixed').css('top', '0px'); $('div.fade').css('top', '0px'); $('div.ui-fixed-overlay').css('top', '0px'); $('div.ui-bar-a').css('top', '0px');- Using data-role="header" (doesn't persist like the footer does). This method will create the header I want (because I overrode some of the CSS), but when I transition between pages, it won't maintain the header at the top. JQM documentation also does not state that they support persistent headers while it does state that it supports persistent footers:
The HTML on each page:
<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false"> <img src="images/bgheader.png" /> </div>解决方案I've been banging my head against this problem for several days, and for once Google was no help. I finally came up with the following solution. It copies the header HTML onto a new page before the transition begins, then removes the code from the previous page once the transition completes. The header and footer will still move with the page transition, but they will persist even while navigating nested lists.
// dynamically move the header and footer between pages on load events $('div.ui-page').live('pagebeforeshow', function(event, ui) { // avoid duplicating the header on the first page load if (ui.prevPage.length == 0) return; // remove the jQuery Mobile-generated header $('.ui-header').addClass('to-remove-now'); $('#header').removeClass('to-remove-now'); $('.to-remove-now').remove(); // grab the code from the current header and footer header = $('#header')[0].outerHTML; footer = $('#footer')[0].outerHTML; // mark the existing header and footer for deletion $('#header').addClass('to-remove'); $('#footer').addClass('to-remove'); // prepend the header and append the footer to the generated HTML event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer; }); // remove header from previous page $('div.ui-page').live('pagehide', function(event, ui) { $('.to-remove').remove(); });Then just add
id="header"to the header div andid="footer"to the footer, and place them as you normally would in your content.这篇关于jQuery Mobile中的持久标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
