3

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

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

如何在 jQuery Mobile 中将标题设置为全屏模式？

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

这是所需的效果（标题中的 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>

脚本.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');  
    });
4

1 回答 1

0

这段代码似乎工作正常。我只在 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完全为空。

于 2013-03-06T18:15:23.593 回答