jquery-mobile - ページをdiv jQuery Mobileにロードする

Question

jQuery Mobile のボタンをクリックして、div コンテナーの別のフォルダー (例: "files/pages/example.html") にあるページのコンテンツを読み込みたい!

どうやってするの？

<div data-role="page">
     <div id="container" data-role="content"><button id="clickButton">Click me!</button></div>
</div>

Answer 1

$.mobile.loadPageは、必要なメソッドです。外部の html ファイルを読み込んで dom に挿入することができます。このメソッドのデフォルトでは、ページ全体としてロードするため、dom 要素にロードするオプションを指定する必要があります。これはサンプル (およびテストされていない) コードです。

$('#clickButton').on("click",function(){
  $.mobile.loadPage("theURLofThePage",{pageContainer: $('#container')})
});

ここで、crossDomain のセキュリティ問題を忘れないでください。以下を追加することで、Firefoxでこれを機能させることができました。

$("#landingPage").live('pageinit', function() {
            jQuery.support.cors = true;
            $.mobile.allowCrossDomainPages=true;
        });

また、ロードするページはdata-role=page divでラップする必要があります(id='secondPage' があるとしましょう)。ロード後、id=secondPage divのdata-role=pageでトリガーします。

$('#secondPage").trigger('pagecreate');