jQuery Mobile 中的持久标头 [英] Persistent header in jQuery Mobile

问题描述

无法想出一种方法来悬赏我的旧问题，所以我重新发布它，因为它可能是一个错误.

简短版本:我想要 PhoneGap+JQM 应用程序中的持久页眉，它在页面转换之间保持原位(从不移动)，就像页脚可以设计的那样.

长版:首先，我对 jQuery 和 JQM 完全陌生，所以请指出我犯的任何新手错误.

我正在尝试获取一个在应用程序的不同页面之间持续存在的标题.当用户在页面之间转换时，它必须像持久页脚一样保持原位.持久性页脚是使用 data-role="footer" data-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

现在我正在尝试做同样的事情，但我希望它位于应用程序的顶部而不是底部.我尝试了以下事情:

• 将页脚移到页面顶部(不知道要在 jQuery 中捕获什么标签.尝试使用多个 jQuery 类的 div.(jQuery 类)，但没有奏效.我使用 FireBug 确定它是顶部"" 需要更改的 CSS 属性.

每个页面上的 HTML:

<img src="images/bgheader.png"/>

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"(不像页脚那样持久).此方法将创建我想要的标题(因为我覆盖了一些 CSS)，但是当我在页面之间转换时，它不会将标题保留在顶部.JQM 文档也没有声明它们支持持久页眉，但它声明它支持持久页脚:

每个页面上的 HTML:

<img src="images/bgheader.png"/>

解决方案

几天来我一直在努力解决这个问题，这一次 Google 毫无帮助.我终于想出了以下解决方案.它在转换开始之前将标题 HTML 复制到新页面上，然后在转换完成后从前一页中删除代码.页眉和页脚仍会随着页面转换而移动，但即使在导航嵌套列表时它们也会保持不变.

//在加载事件时在页面之间动态移动页眉和页脚$('div.ui-page').live('pagebeforeshow', function(event, ui) {//避免在第一页加载时复制标题如果(ui.prevPage.length == 0)返回；//移除 jQuery Mobile 生成的标头$('.ui-header').addClass('to-remove-now');$('#header').removeClass('to-remove-now');$('.to-remove-now').remove();//从当前页眉页脚中获取代码header = $('#header')[0].outerHTML;页脚 = $('#footer')[0].outerHTML;//标记要删除的现有页眉和页脚$('#header').addClass('to-remove');$('#footer').addClass('to-remove');//在生成的 HTML 中添加页眉和页脚event.currentTarget.innerHTML = 标题 + event.currentTarget.innerHTML + 页脚；});//删除前一页的页眉$('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 and id="footer" to the footer, and place them as you normally would in your content.

这篇关于jQuery Mobile 中的持久标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！