Phonegap＆jQuery Mobile、ページの代わりにコンテンツのhtmlを変更するには？

私は静的フッターとヘッダーを使用しています。私はこれらの内容をjavascriptを使って設定しました。彼らはダイナミックです。Phonegap＆jQuery Mobile、ページの代わりにコンテンツのhtmlを変更するには？

<body> 
    <div data-role="page" id="page"> 

     <div data-role="header"> 
      <h1>App name</h1> 
     </div><!-- /header --> 

     <div data-role="content" id="content"> 
      <p>Loading...</p> 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#" id="menu1">Menu1</a></li> 
        <li><a href="#" id="menu2">Menu2</a></li> 
        <li><a href="#" id="menu3">Menu3</a></li> 
       </ul> 
      </div> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
</body>

私は、メニュー項目のクリックイベントをキャッチし、私はその後、私は次のように使用して$("#content") HTMLを変更したい$("#page").live('pageinit', mainMenu);

を使用して起動します。

$.mobile.changePage("main-menu.html", { transition: "slideup" });

これが変化ページ全体#contentの内容のみを変更するように設定するにはどうすればよいですか？

出典

2012-02-09 bartolsthoorn

を負荷（ 'メイン-menu.html'）;'。これはjquery mobileをバイパスし、遷移を使用する能力を失うことです！ – bartolsthoorn

JQMでは、#content htmlだけを置き換えることはネイティブにサポートされていません。

しかし、自分のシステムをロールすることは可能です。基本的には、コンテンツをロードする独自の関数を記述することです。

$('#content').load('main-menu.html');

あなたは、私がここで説明してきた構造を使用する必要があります：私は明らかに `$（ '＃コンテンツ'）を使用することができCreating templated/persistant header/footer template in jQuery Mobile and PhoneGap

出典

2012-02-14 12:23:30 bartolsthoorn

Phonegap＆jQuery Mobile、ページの代わりにコンテンツのhtmlを変更するには？

答えて

関連する問題