Question

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

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

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

Answer 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"添加到页脚，然后像平常一样将其放置在内容中。

Answer 3

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

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

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

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

Answer 5

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

我没有机会尝试一下，但它应该以标题的方式工作。

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

P.S。请注意我不擅长这件事特别是css。所有评论将不胜感激。

感谢。

Answer 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 ) );

到它。祝我好运......

Answer 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。如果你知道你的所有身份证，你可能没有它......可以随意提出更好的其他规则。我已经打了很长时间以防止这种情况再次关注。

Answer 9

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

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

编辑：我注意到，你必须打开持久标头的页面转换。但是过渡使应用程序放慢了太多......

Answer 10

检查this示例，在“将页脚和标题保持不变”下。

jQuery Mobile中的持久标头

10 个答案: