0

我有一个简单的 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 函数将原始部分转换为解析部分！

功能$.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>
4

1 回答 1

1

解决方案

jQuery Mobile为小部件重新样式提供了许多功能，但只有其中一个功能可以重新设置整个页面的样式。

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

#index你的页面的 id 应该在哪里DIV。

这里还有其他可以使用的函数，但与此函数不同的是，它只会设置带有data-role="content"属性的trigger('pagecreat');DIV 样式。要对此进行测试，jsFiddle 示例 应替换为trigger('pagecreate');trigger('create');

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

如果可能的话，不应在BODY标签内使用SCRIPT标签，虽然它会起作用，但它可能会导致其他问题。如果您想了解有关此主题的更多信息以及如何处理动态添加的内容，请查看这篇文章，它是我的.jQuery Mobilepersonal 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');

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

于 2013-01-26T08:36:14.220 回答