Question

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

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

我认为这与新主题继承机制有关，但我似乎无法找到有关该主题的任何有用文档。

Answer 2

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

“固定”页眉/页脚在转换期间移动到包含“page”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内。

希望它有所帮助！

Jquery mobile 1.4页眉在页面转换期间失去了css样式

2 个答案: