3

私のjQuery Mobileアプリ（MVC4テンプレート）では、特定のページのヘッダーを完全に非表示にする必要があります（画面を埋めたいマップがあります）。これを行うには、ヘッダーで data-fullscreen 属性を「true」に設定する必要があると思います。

この質問で与えられたアドバイスに従うことで、上記をある程度達成することができました：-

jQuery Mobileでヘッダーをフルスクリーンモードに設定するには?

ただし、ヘッダーの data-fullscreen 属性が最初に「true」に設定されている場合にのみ機能します。これは、各ページをロードするときにフルスクリーンから固定に移動するときにヘッダーが「ジャンプ」するため、望ましくありません。ヘッダーを 1 つのページでフルスクリーン\非表示にしたい場合、残りのページではヘッダーを固定したままにする必要があります。

目的の効果は次のとおりです (ヘッダーで 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');  
    });
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 に答える