解决方案

Question

我有一个简单的jquery移动页面：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.2">
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head>
  <body>
    <div id="MyContainer">

        <!-- ##################### Raw Part ##################### -->
        <div data-role="page">
            <div data-role="header">
                <h1> Hello World </h1>
            </div>                        
        </div>

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

当我执行该页面时，它使用黑色标题和标题呈现正常。

该页面正确加载的原因是因为jquery-mobile在页面加载后放置了MyContainer的innerHTML所需的新属性：

<!-- ##################### Parsed Part ##################### -->
<div data-role="page" data-url="/jqueryMobile/TC_Page/main2.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1464px;">
    <div data-role="header" class="ui-header ui-bar-a" role="banner">
          <h1 class="ui-title" role="heading" aria-level="1">
                Hello World
          </h1>
    </div>
</div>

换句话说， Raw Part 变成 Parsed Part 。

我想知道jquery.mobile函数是从原始部分转换为Parsed Part的部分！

函数$.mobile.changePage()，$.mobile.loadPage()使我能够做到这一点例如我可以这样做：

// place response from SomeUrl inside the div MyContainer and convert it from raw to parsed!
$.mobile.loadPage('SomeUrl', { pageContainer: $('#MyContainer') });

// later then get the child child (note second child) of MyContainer and make that the child of MyContainer

现在的问题是：

所有这些功能：loadPage，ChangePage等进行ajax调用。 如果我已经拥有要注入的html（我在webBrowser本地存储或Cookie中有它），该怎么办？换句话说，我该怎样才能完成这项工作：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.2">
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>
</head>
  <body>
    <div id="MyContainer">



    </div>

    <script>
        function SomeFunction(){

             var someHTML = localStorate.html1;   // html1 = raw part = <div data-role="page"><div data-role="header"><h1> Hello World </h1></div></div>

             $("#MyContainer").html(someHTML);

             // now here I am stuck!!!!!!!!!!!!!!!
             // how can I make the content of MyContainer go from the raw part to the Parsed Part!
             // I am looking for something like:


             $JqueryMobile.ParseHTML($("#MyContainer"));
        }
    </script>
  </body>
</html>

Answer 1

解决方案

jQuery Mobile 为小部件重新打印提供了许多功能，但其中只有一个会重新整理整个页面。

    $('#index').trigger('pagecreate');

#index 应该是您网页的ID DIV 。

此处还可以使用其他功能，但与 trigger('pagecreat'); 不同，此功能仅设置DIV data-role =“content”属性。要对此进行测试，jsFiddle示例 trigger('pagecreate'); 应替换为 trigger('create');

    $('#index').trigger('create');

如果可能 SCRIPT 标记不应在 BODY 标记内使用，虽然它会起作用但可能会导致其他问题。如果您想了解有关此主题的更多信息以及 jQuery Mobile 如何处理动态添加的内容，请查看此 ARTICLE ，这是我的一部分的 personal blog

实施例

工作示例：jsFiddle

这部分代码应该引起您的兴趣：

$('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> '); $('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>'); $('#index').trigger('pagecreate');

此代码用于动态附加页面页脚和单选按钮以页面内容。

在localStorage上调用jquery changePage（）

现在的问题是：

1 个答案:

解决方案

实施例