在我的jQuery Mobile应用程序(MVC4模板)中,我需要完全隐藏特定页面上的标题(它有一张我想填满屏幕的地图)。为了做到这一点,我认为标题需要将数据全屏属性设置为“true”。在jQuery Mobile中隐藏标题
我管理按照此问题给出的建议实现上述在一定程度上: -
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');
});