jquery - 在 jQuery Mobile 中隐藏 header

Question

在我的 jQuery Mobile 应用程序(MVC4 模板)中，我需要完全隐藏特定页面上的标题(它上面有一张我想填满屏幕的 map )。为了做到这一点，我相信标题需要将 data-fullscreen 属性设置为“true”。

我按照这个问题中给出的建议在一定程度上实现了上述目标:-

How to set header to full screen mode in jQuery Mobile?

然而，它仅在 header 的数据全屏属性最初设置为“true”时才有效，这是不希望的，因为它会导致 header 在加载每个页面时从全屏变为固定时“跳转”，并且因为我只希望标题全屏\隐藏在一个页面上，在其余页面上标题只需要保持固定。

这是期望的效果(在标题中将 data-fullscreen 设置为 true):-

http://jsfiddle.net/Gajotres/HCcUe/

在这里你可以看到如果你没有 data-fullscreen="true"它就不起作用

http://jsfiddle.net/sidd92/QcgMZ/

到目前为止，这是我自己的代码:-

_layout.cshtml

<div id="Index" data-role="page">                          
    <div data-role="header" data-theme="b" data-position="fixed" data-fullscreen="true" id="dvHeader"> 
        <div id="logo"></div>                                         
    </div>          
    <div data-role="header" data-theme="a">
        <a id="btnGlobalBack" data-role="button" data-icon="back" style="display:none;">Back</a>
        <h1>@ViewBag.Title</h1> 
    </div>  

    <div id="mainContent" data-role="content" page_name="test">                                         
        @RenderBody()  
        @RenderSection("BodyScriptsSection", required: false)           
    </div>               
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        @RenderSection("Footer")                
    </div><!-- /footer -->                                  
</div>

script.js

    $(document).on("click", "#btnEnableFullscreenAndHide", function () {
        $("#dvHeader").attr({ 'data-fullscreen': 'true', 'data-position': 'fixed' })
        .removeAttr('out')
        .addClass('ui-header-fixed')
        .removeAttr('reverse')
        .addClass('ui-header-fullscreen')
        .addClass('slidedown')
        .addClass('out')
        .addClass('reverse');   
    });

    $(document).on("click", "#btnBackToFixed", function () {   
        $("#dvHeader").removeAttr('data-fullscreen')
        .removeClass('ui-header-fullscreen')
        .removeClass('ui-header-fixed')
        .removeClass('slidedown')
        .addClass('out')
        .addClass('reverse');  
    });

Answer 1

这段代码似乎工作正常。请注意，我只在 Chrome 中测试过。

    <div data-role="page" id="home">

    <div data-role="header" data-fullscreen="true">
    </div><!-- /header -->

    <div data-role="content" class="infobox">
        <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 -->

</div><!-- /page -->

因此，请尝试删除该特定页面上的固定属性，并确保 data-role="header" div 完全为空。