Jquery mobile 1.4 页眉页脚在页面转换期间丢失 css 样式答案

【问题标题】：Jquery mobile 1.4 header footer lose css styling during page transitionJquery mobile 1.4 页眉页脚在页面转换期间丢失 css 样式
【发布时间】：2014-01-19 17:51:37
【问题描述】：

我刚刚切换到 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>

我通过主干视图加载页面模板，并使用以下代码进行页面转换

$.mobile.changePage(__this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});

在 1.4 alpha 和 beta 中一切正常，但在 1.4 版本中，页眉和页脚在再次应用 css 样式之前会丢失一段时间的 css 样式。

【问题讨论】：

在 1.4 alpha 和 beta 中一切正常，
即使没有代码，也没有人能够提供帮助。另外，您是否使用由 ThemeRoller 制作的自定义主题？
我在问题中添加了代码
试试这个$.mobile.pageContainer.pagecontainer("change", __this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
不行，还在闪

标签： ios jquery-mobile cordova

【解决方案1】：

我遇到了同样的问题。我的解决办法是直接在表头加上data-theme="a"。

<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 -->

我相信这与新的主题继承机制有关，但我似乎找不到任何有用的文档。

【讨论】：

谢谢，它有效，不幸的主题在 jquerymobile 1.4 中运行良好
是的@Max 谢谢你，这真的是非常棒的事情，非常棒，它帮助了我很多次@Max！哈哈，我现在无法阻止它..哈哈
谢谢先生！我欠你一些东西:)

【解决方案2】：

我尝试了 Max 的答案，但它对我不起作用。

“固定”页眉/页脚在过渡期间移出包含“页面”的 div，并在动画后移回。您应该添加额外的 css 选择器以在移动的页眉/页脚上应用样式。

例如，如果您当前的选择器是 .ui-page-theme-a .ui-bar-a .ui-btn.back-link ，请为您的 css 添加另一个选择器，例如 .ui-mobile-viewport .ui-bar-a .ui-btn.back-link。这是因为页眉/页脚不再位于 .ui-page-theme-a 内，而是在转换期间位于 .ui-mobile-viewport 内。

希望对你有帮助！

【讨论】：