jQuery Mobile 中的持久标头答案

【问题标题】：Persistent header in jQuery MobilejQuery Mobile 中的持久标头
【发布时间】：2011-09-09 16:10:24
【问题描述】：

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

短版：我希望 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：

<div data-role="footer" data-position="fixed" data-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" （不像页脚那样持续存在）。此方法将创建我想要的标题（因为我覆盖了一些 CSS），但是当我在页面之间转换时，它不会将标题保持在顶部。 JQM 文档也没有声明它们支持持久页眉，但它确实声明它支持持久页脚：

每个页面上的 HTML：

<div data-role="header" data-position="fixed" data-id="header" id="header" data-backbtn="false">
<img src="images/bgheader.png" />
</div>

【问题讨论】：

标签： jquery mobile header persistent

【解决方案1】：

一点点 jquery 就可以解决问题

<script type="text/javascript">
    $(document).ready(function() {
      $('#lpage1:first').addClass('ui-btn-active'); //set the first tab as active   
      firstContent=$('#content1'); //defining selectors
      secondContent=$('#content2'); 
      secondContent.hide(); //hide the second content division
    });

    // show only the first content div
    function showContent1() { 
        firstContent.show();
        secondContent.hide();
    }
    function showContent2() {
        firstContent.hide();
        secondContent.show();
    }

    //clicking on tab 2 
    $('#lpage2').live('tap',function(event){
        //alert("click");
        showContent2();
    });
</script>
<body> 
<!-- Start of first page -->
<div data-role="page" id="page1">

    <div data-role="header" data-position="fixed">
        <h1>Foo</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#" id="lpage1" data-transition="pop">Home<br/>&nbsp;</a></li>
                <li><a href="#" id="lpage2" data-transition="pop">My<br/>Profile</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

    <!-- page1 -->
    <div data-role="content" id="content1"> 
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <!-- page2 -->
    <div data-role="content" id="content2"> 
        <p>I'm second in the source order so I'm shown as the page.</p>     
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

【讨论】：

但我仍在研究如何在这种类型的过渡中制作动画

【解决方案2】：

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

// 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();
});

然后只需将 id="header" 添加到标题 div 并将 id="footer" 添加到页脚，然后像往常一样将它们放置在内容中。

【讨论】：

【解决方案3】：

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

请注意，我没有在移动设备上测试过此代码..

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

【讨论】：

这似乎也不起作用。我认为 OP 的问题是页眉在页面转换期间没有保持固定。我也遇到了同样的问题...如果我找到解决方法会发布。

【解决方案4】：

1) 除了 jquery.js，jquerymobile.js 和 .css 文件下载并包括：jquery.easing.1.3.js、jquery.mobile.scrollview.js 和 scrollview.js。（谷歌）

2) 具有以下样式属性的标准页眉、列表视图和页脚：

<div id="home" data-role="page">...</div>
<div data-role="content"><ul data-role="listview"><li>List item 1</li></ul></div>
<div data-role="footer" style="position: fixed;bottom: 0px;">...</div>

作为described in detail here。

【讨论】：

【解决方案5】：

这里有一个使用页脚执行此操作的示例：http://jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

我还没有机会尝试它，但它应该以与标题相同的方式工作。

【讨论】：

【解决方案6】：

嗨，它可能会迟到，但这对我有用。

[data-role=page]
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: scroll;
    margin: 0 auto -40px;
}
.footerPlaceHolder
{
    height: 40px;
}
[data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;}

你的html

<div data-role="page">
    ....Your content....
    <div class="footerPlaceHolder"></div>
    <div data-role="footer"> 
        <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a>
        <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div>
</div>

附：请注意我不擅长这件事，尤其是 css。所有 cmets 将不胜感激。

谢谢。

【讨论】：

【解决方案7】：

我尝试研究 jquery 移动源，我认为持久页脚的魔力发生在这里。

$( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) {
            var page = $( event.target ),
                footer = page.find( ":jqmData(role='footer')" ),
                id = footer.data( "id" ),
                prevPage = ui.prevPage,
                prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ),
                prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id;

            if ( id && prevFooterMatches ) {
                stickyFooter = footer;
                setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
            }
        })
        .delegate( ".ui-page", "pageshow", function( event, ui ) {
            var $this = $( this );

            if ( stickyFooter && stickyFooter.length ) {
                setTimeout(function() {
                    setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
                    stickyFooter = null;
                }, 500);
            }

            $.mobile.fixedToolbars.show( true, this );
        });

我正在考虑添加

setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );

到它。祝我好运...

【讨论】：

【解决方案8】：

如果您可以使用一个共享标头，您可以在主页中提供标头：（注意：不涉及 jQuery，抱歉“只使用 jQuery”家伙：-p）

<div class="header">
    <div class="logo"></div>
    <div class="menu"></div>
</div>
<div data-role="page" class="page" id="loading">
    <div data-role="content">
        <h1>Your Page</h1>
    </div>
</div>

然后使用 CSS 将每个页面的顶部向下推：

.ui-page{
    top:64px !important;
}

我对其中的 !important 不满意，但是 jQueryM 在 CSS 中使用的规则在不使用 ID 的情况下具有最高的特异性。如果你知道所有的 ID，你可能不需要它...随意提出其他更好的规则。我已经为此苦苦挣扎了太久，不再关心了。

【讨论】：

【解决方案9】：

我认为这是最近添加到 JQM 中的。 http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

此链接清楚地表明您可以将 data-id 属性添加到 BOTH。页眉和页脚。但这对我不起作用。

编辑：我注意到，您必须为持久标题打开页面转换。但是过渡太慢了应用程序......

【讨论】：

【解决方案10】：

检查this 示例，在使页脚和页眉持久化下。

【讨论】：

不幸的是，这不起作用，因为如果我按照该示例所述进行操作，标头将无法实现此功能：stays in-place (never moves) between page transitions like the footer can be designed to do