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に変わります。

Raw Part から Parsed Part への変換を行った jquery.mobile 関数を知りたいです!

functions$.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ウィジェットのスタイルを変更するための多数の機能を提供しますが、そのうちの 1 つだけがページ全体のスタイルを変更します。

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

あなたのページのIDをどこ#indexに置くべきですかDIV。

ここで使用できる他の関数もありますが、この関数とは異なり、data-role="content"属性を使用してtrigger('pagecreat');DIV のみをスタイルします。これをテストするには、jsFiddle の例を次の ように置き換える必要があります。trigger('pagecreate');trigger('create');

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

可能であれば、 SCRIPTタグをBODYタグ内で使用しないでください。これは機能しますが、追加の問題が発生する可能性があります。jQuery Mobileこのトピックと、動的に追加されたコンテンツを処理する方法について詳しく知りたい場合は、私の の一部であるこの記事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');

このコードは、ページ フッターとラジオ ボタンをページ コンテンツに動的に追加するために使用されます。

于 2013-01-26T08:36:14.220 に答える