Question

嗨，我是jquery mobile的新手。我在我的应用程序中打了三页。 page1.html-＆GT; page2.html-＆GT; page3.html。当 page2.html 返回 page1.html时，我需要保留page1的文本框值。

在谷歌上搜索后，我得到了答案

    $(document).bind("mobileinit", function () {

    $.mobile.page.prototype.options.domCache = true;

});

我如何支持我的页面

history.go(-1);

转到下一页

$.mobile.pageContainer.pagecontainer("change", url, {
    allowSamePageTransition: true,
    transition: 'none',
    showLoadMsg: false,
    changeHash: true

})

但当第2页返回第1页，然后第1页转到第2页时，是我的问题， page2 文本框值也将保留。是否有可能当我单击后退按钮然后文本框值将被保留，但是当我单击下一个按钮然后页面将刷新？

Answer 1

你做错了，你应该读完有关兑现的一切。

当打开页面兑现时，您仍然可以选择决定打开哪个页面以及哪个页面不会获得兑现。

要防止第二页兑现，您需要做的就是添加属性数据-dom-cache =＆＃34; false＆＃34;到你的第二页data-role =＆＃34; page＆＃34; div容器，就是这样。

工作示例：

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(document).bind("mobileinit", function () {
                $.mobile.page.prototype.options.domCache = true;
            });     
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="second.html" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="text" value="" id="sdfsd"/>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

second.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>collapsible demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

    <div data-role="page" id="page2" data-dom-cache="false">
        <div data-role="header">
            <a href="index.html" class="ui-btn-left">Back</a>
            <h1>jQuery Mobile Example</h1>
        </div>
        <div data-role="content" class="ui-content">
            <input type="text" value=""  id="dffsd"/>
        </div>
    </div>
</body>

</html>

动态缓存页面jquery mobile

1 个答案:

的index.html

second.html