Question

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

我设法通过遵循这个问题中给出的建议在一定程度上实现了上述目标： -

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

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

这是所需的效果（标题中数据全屏设置为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完全为空。

在jQuery Mobile中隐藏标题

1 个答案: