Скрыть заголовок в jQuery Mobile

Question

В моем мобильном приложении jQuery (шаблон MVC4) мне нужно полностью скрыть заголовок на определенной странице (у него есть карта, на которой я хочу заполнить экран). Для этого я считаю, что заголовку нужен атрибут атрибута data-fullscreen для «true».

мне удалось достичь выше в определенной степени, следуя советам в этом вопросе: -

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

Однако это работает только, если заголовок имеет атрибут данных полноэкранный режим установлен в положение " true ", это нежелательно, потому что это приводит к тому, что заголовок« прыгает », когда он переходит от полноэкранного режима к фиксированному при загрузке каждой страницы, а также потому, что мне нужен только заголовок в полноэкранном режиме, скрывающийся на одной странице, на остальных страницах заголовок просто должен оставаться фиксированным.

Вот желаемого эффекта (с набором данных, полноэкранный режим для истинно в заголовке): -

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

И здесь вы можете увидеть, он не работает, если вы не имеете данных полноэкранным = «истина»

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

Вот мой собственный код до сих пор: -

_LA yout.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 совершенно пуст.