动态缓存页面jQuery Mobile

Question

嗨，我是jquery mobile的新手。 我在我的应用程序中三页。 page1.html-> page2.html-> 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

})

但是当page2返回page1时 ，nw是我的问题，然后page1转到page2时 ， page2文本框值也将保留。 当我单击“后退”按钮时，文本框的值将被保留，但是当我单击“下一个”按钮时，页面将被刷新吗？

Answer 1

您做错了一切，您应该阅读有关兑现的所有内容。

启用页面兑现后，您仍然可以选择决定打开哪个页面以及不兑现哪个页面。

防止第二页套现的所有操作是在第二页data-role =“ page” div容器中添加属性data-dom-cache =“ false”。

工作示例：

的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 个解决方案

解决方案1
0 已采纳 2014-05-24 08:48:10

的index.html

second.html

动态缓存页面jQuery Mobile

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-24 08:48:10

的index.html

second.html

解决方案1
0 已采纳 2014-05-24 08:48:10