我刚切换到 JQuery Mobile 1.4，现在当我进行页面转换时，页眉和页脚都会在再次应用之前失去一段时间的 css 样式。
iOS 7.04
主索引文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<script type="text/javascript" src="js/library/phonegap/cordova_ios.js"></script>
<link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.4.0.css">
<link rel="stylesheet" type="text/css" href="css/application/base.css">
<script data-main="js/main.js" src="js/library/require/require.js"></script>
</head>
<body class="main_body">
</body>
</html>
一些页眉和页脚相互转换的页面
第1页
<div id="login_template_wrapper">
<div id="leftmainmenu" class="menu-container" data-position="left" data-display="overlay">
</div>
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('LOGIN'));%></h1>
<!-- <a id="menu_link" data-role="button" data-icon="gear" data-position="left"><%print(T('LEFTMAINMENU'))%></a> -->
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<div id="login_input">
<div data-role="label"><%print(T('USERNAME'));%></div><input bc-data-role="input" class="login-form" name="username" value="<%print(logindata['du'])%>"/>
<div data-role="label"><%print(T('PASSWORD'));%></div><input bc-data-role="input" class="login-form" type="password" name="password" value="<%print(logindata['dp'])%>"/>
<input type="submit" class="login-form" data-role="button" id="login_submit" value="<%print(T('LOGIN'));%>"/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="rememberme" id="rememberme" <%if (logindata['rm']) {print('checked');}%> />
<label for="rememberme"><%print(T('REMEMBER_ME'))%></label>
<input type="checkbox" name="rememberpass" id="rememberpass" <%if (logindata['rp']) {print('checked');}%> />
<label for="rememberpass"><%print(T('REMEMBER_PASSWD'))%></label>
</fieldset>
</div>
</div>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
第2页
<div id="registration_template_wrapper">
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('REGISTRATION'));%></h1>
<a href="#login/reverse" data-role="button" data-icon="back" data-position="left"><%print(T('BACK'))%></a>
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<ul id="registration_input" data-role="listview" data-inset="true">
<li><div data-role="label"><%print(T('USERNAME1'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME1" name="USERNAME1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('USERNAME2'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME2" name="USERNAME2" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD1'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD1" name="PASSWORD1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD2'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD2" name="PASSWORD2" value="" data-mini="true"/></li>
<!--
<li><div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="showpass" id="showpass"/>
<label for="showpass"><%print(T('SHOWPASS'))%></label>
</fieldset>
</div></li>
<li><button id="registration_clean"><%print(T('CLEAN'))%></button></li> -->
<li><button id="registration_save"><%print(T('REGISTRATION'))%></li></button>
</ul>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
我通过主干 View 加载页面模板，并使用以下代码进行页面转换
$.mobile.changePage(__this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
在 1.4 alpha 和 beta 中一切正常，但在 1.4 版本中，页眉和页脚在再次应用 css 样式之前失去了一段时间的 css 样式。
最佳答案
我遇到了同样的问题。我的解决方案是直接将 data-theme="a" 添加到 header 。
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false" data-theme="a">
<h1><%print(T('REGISTRATION'));%></h1>
<a href="#login/reverse" data-role="button" data-icon="back" data-position="left"><%print(T('BACK'))%></a>
</div><!-- /header -->
我相信这与新的主题继承机制有关，但我似乎找不到关于该主题的任何有用文档。
关于ios - Jquery Mobile 1.4 页眉页脚在页面转换期间丢失 css 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20880292/