Question

我有一个jQuery Mobile设置使用多个页面文件，当按下链接或触发事件时，它会动画，滑动。这很好用，但当页面滑入和滑出时，页眉和页脚也会滑动，即使它们保持不变。

我知道我可以覆盖页面更改，只需换出.ui-content但这会导致其他问题，并要求我重做很多代码。

是否有办法保持页面更改和页面更改动画，但页眉和页脚元素会在没有动画的情况下立即更改？

我的代码很简单，

根据要求，这是我的一些代码：

<!--login page-->
<div data-role="page" id="login" data-dom-cache="true" data-theme="a">
        <div data-role="header"  data-tap-toggle="false" data-position="fixed" data-id="header">
            <h1>Mastrack</h1>
        </div>
        <div class="ui-content">
            <form id="loginForm">
                <input type="text" name="username" placeholder="Username">
                <input type="password" name="password" placeholder="Password">
                <input type="submit" value="Sign In">
                <div class="ui-grid-a">
                    <div class="ui-block-a"><label><input type="checkbox" name="remember" data-mini="true">Remember me?</label></div>
                    <div class="ui-block-b"><a href="#" data-role="button" data-mini="true" id="forgotPWD">Forgot Password?</a></div>
                </div>
            </form>
        </div>
        <div data-role="popup" id="loginMessage" data-transition="pop"><p></p></div>
        <div data-role="popup" id="forgotMessage" data-transition="pop" style="padding:0px 8px;">
        <form id="forgotForm">
            <input type="text" placeholder="Username or E-mail">
            <input type="submit" data-theme="b" value="Get New Password">
        </form>
    </div>
</div>

这是我网站的登录页面。它加载的下一页是

<div data-role="page" data-dom-cache="true" id="welcome" data-theme="a">
        <div data-role="header" data-tap-toggle="false" data-position="fixed" data-id="header">
            <h1>Mastrack</h1>
        </div>
        <div class="ui-content">
            Welcome <span id="custName"></span>,<br>
            <p id="messages">

            </p>
        </div>
        <div data-role="footer" data-tap-toggle="false" data-position="fixed" data-theme="b" data-id="footer">
            <div data-role="navbar" data-iconpos="notext">
                <ul>
                    <a href="#settings" class="navigation" data-icon="gear" data-transition="slide">Settings</a>
                    <a href="#devices" class="navigation" data-icon="location" data-transition="slide">Devices</a>
                    <a href="#alerts" class="navigation" data-icon="alert" data-transition="slide">Alerts</a>
                    <a href="#reports" class="navigation" data-icon="info" data-transition="slide">Reports</a>
                </ul>
            </div>
        </div>
    </div>

Answer 1

是的，给出页眉和页脚数据id属性，并使其相同，如：

数据-ID =＆＃34;固定＆＃34;

工作示例：http://jsfiddle.net/Gajotres/JB22E/6/

HTML：

<div data-role="page" id="article1">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
        <h1>Articles 1</h1>
    </div>
    <div data-role="content">
        <p>Article 1</p>
        <a data-role="button" id="add-dynamic-page">Add new dynamic page</a>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
        <h1>Footer</h1>    
    </div>
</div>

这是我的旧例子，是为了完成其他事情，但你可以用它来看看它是如何工作的。正如您所见，页眉和页脚具有 data-id 属性。删除它们，看看会发生什么。

Answer 2

虽然Gajotres的答案部分正确，但我最终使用了不同的解决方案。

在jQueryMobile 1.4.2中，似乎固定导航的data-id方法不是这样做的首选方法。相反，我按照jQueryMobile演示中的this指南来创建效果。我将页眉和页脚放在主页面元素之外，并从其他页面中排除页眉和页脚，并根据需要使用jQuery动态更改内容。

jQuery Mobile在没有动画页眉和页脚的情况下更改页面

2 个答案:

HTML：