jQuery Mobile 更改页面而不使用动画页眉和页脚

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

是的，给页眉和页脚 data-id 属性，并使其相同，例如：

data-id="固定"

工作示例：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 动态更改内容。