如何在JQueryMobile中使用autoInitializePage和客户端生成的内容？

时间：2012-07-11 14:59:33

标签： javascript jquery-mobile initialization generated-code

我正在尝试阻止Jquery Mobile初始化，直到页面内容加载完毕，但我没有得到所需的结果。该项目是一个简单的问答测验。在我的HTML文档中，我有3个容器div [data-role = page]：

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#result

我的document.ready（）解析外部JSON文件以将内容加载到这些页面，将＃q0复制到测验中的问题数量。最终结果如下：

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#q1
div[data-role=page]#q2
div[data-role=page]#q3
div[data-role=page]#q4
div[data-role=page]#result

在我的文件头中，我有：

<script>
    $(document).bind("mobileinit", function () {
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="js/quiz.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html表示在加载Jquery Mobile之前配置设置，这是我所做的。在quiz.js结束时，我有调用初始化页面的信息：

$(document).ready(function(){

    // ... all the code to load JSON quiz content is here

    $.mobile.initializePage();
});

我的问题是，当我从标题页面进入第一个问题页面时，我会看到所有问题同时发生。呈现的HTML如下所示：

<div data-role="page" id="q0" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q1" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q2" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q3" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q4" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>

在document.ready（）之后但在调用mobile.initializePage之前，HTML呈现为：

<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q4" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q5" class="pg_type_question" data-title="Quiz Title">...</div>

我不明白为什么每个问题页面都变为活动状态，数据网址为“q0”。

提前感谢您的帮助！

1 个答案:

答案 0 :(得分：3)

如果没有看到整页，就很难说。这是我将你描述的内容放在一起的一个例子。 autoInitializePage设置为false（在 jQuery Mobile加载之前），在加载页面后，某些元素会添加到DOM中，然后在我们＆＃39时调用$.mobile.initializePage(); ;重新摆弄页面。然后jQuery Mobile按预期初始化它，导航链接似乎有效。

<html> 
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.autoInitializePage = false;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').append(
                '<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 1</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q2" data-role="button">To Page 2</a></p>' +
                    '</div>' +
                '</div>' +
                '<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 2</h1>' +
                    '</div>' +
                    '<div data-role="content">  ' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q3" data-role="button">To Page 3</a></p>  ' +
                    '</div> ' +
                '</div>' +
                '<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 3</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>The End</h2>' +
                    '</div>' +
                '</div>'
            );

            $.mobile.initializePage();
        });
    </script>
  </head> 
  <body>
    <div data-role="page" id="title" data-title="Quiz Title">
        <div data-role="header">
            <h1>Title Page</h1>
        </div>
        <div data-role="content">
            <h2>Welcome</h2>
            <p><a href="#q1" data-role="button">To Page 1</a></p>
        </div>
    </div>
  </body>
</html>

在玩游戏时，我确实注意到[div data-role="page"]元素确实需要成为彼此的兄弟姐妹;检查以确保您不会意外地将它们全部附加到标题页或身体以外的父元素。

如果您要调用外部JSON源，则需要确保在完成回调中处理对$.mobile.initializePage();的调用;否则，在AJAX对JSON源的调用完成之前，您可能会遇到一个竞争条件，其中$.mobile.initializePage();被调用。

希望这有帮助！

相关问题
最新问题