2012-04-20 4 views
2

の直接の子として、私は、実行時に、サーバーから別のサブページをロードしていないと、それらは、これらの負荷を行うコンテナ(divを)持っています。 コンテナdivは、div内のサブページ(data-role = 'page'を持つdiv)を保持します。サブページ-のdivは体の直接の子ではない場合jQueryのモバイルサブページ(データ-役割=「ページ」)は、私の場合は、本体

どうやらナビゲーションが機能していません。

私は間違っていますか?これには解決策がありますか?

<body> 

<!-- Start of first page --> 
<div data-role="page" id="foo"> 

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

    <div data-role="content"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

<div class="container"> 
    <div data-role="page" id="bar"> 

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

     <div data-role="content"> 
      <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>  
      <p><a href="#foo">Back to foo</a></p> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
</div> 

<!-- Start of second page --> 

</body> 

答えて

4

プラグインを使用していますか?

デフォルトでのjQuery Mobileは唯一Ajaxを介して第一のdiv-データ役割ページの内容をロードしますので。最初のページでない限り、完全にロードする必要があります。他のすべて(ヘッド、スクリプトは、あなたのcontainer.classはロードされません。

が知らlimiatatonsドキュメントでhereを参照してください。

回避するには、あなたは)作品にはまだある(JQM subpage pluginまたはJQM multiview pluginを使用することができます

「ラッパー」JQMページの外側に追加のページを置くと、JQM Ajaxが読み込まれないため、サブページまたはネストされたページをラッピングJQMページ内に読み込むことができます。

EDIT:
下のコメントに基づいて:あなたはマルチビューを使用している場合、これはあなたのコンテナクラス内のすべてのページをラップahtough

あなたは、このようなあなたのページを構築することができます。これは可能ですか?

<div data-role="page" data-wrapper="true" id="your_wrapper_page" class="CONTAINER"> 
    <div data-role="header"> 
     <p>global header acrolls all pages</p> 
    </div> 
    <div data-role="panel" data-id="main" data-panel="main" data-hash="history"> 
     <div data-role="page" id="main_first" data-show="first"> 
      <div data-role="header" data-position="fixed" data-theme="a"> 
       <h1>First Page LOCAL HEADER</h1> 
      </div> 
      <div data-role="content" class="yellow"> 
       <p>Content</p> 
      </div> 
      <div data-role="footer"> 
       <p>first page local footer</p> 
      </div> 
     </div> 
     <div data-role="page" id="main_second"> 
      <div data-role="header" data-theme="a" data-position="fixed"> 
       <h1>Second Page LOCAL HEADER</h1> 
      </div> 
      <div data-role="content" class="brown"> 
       <div>Lorem Ipsum</div> 
      </div> 
      <div data-role="footer"> 
       <p>second page local footer</p> 
      </div> 
     </div> 
    </div> 
    <div data-role="footer"> 
     <p>global footer acrolls all pages</p> 
    </div> 
</div> 

また、あなたがラッパーページ内のNEST、コンテンツセクションの後、しかしポップオーバー/ポップアップがフルスクリーン可能にするために、マルチビュー内のいくつかのものを上書きするために強制しなければならないことができポップオーバーパネルを、使用することができます。

私はまだJQM 1.1に合わせてパネル遷移を取得しています。だから時間が必要です。私はJQMはこのように動作するように作られていないと思うので、それ以外は

は、あなたは、あなた自身の解決策を考え出す必要があります。

質問があります。あなたが.containerなしで作業できるかどうかです。

+0

お返事ありがとうございました。サブページの読み込みは、jQuery-mobileのAJAX呼び出しとは独立して行われます。私が直面している唯一の問題は、事実上、loadadサブページがjQuery.mobile.changePage( '#[id]')を介して移動するのを避けるためにコンテナdiv内になければならないということです。私は、このコールのための作業の回避策を見つけることができる場合: jQuery.mobile.changePage(「#バー」) を私は喜んで、より多くのだろう:) –

+0

何を達成しようとしていますか?あなたは読み込み不可能なページを持っていますか? – frequent

+0

いいえ上記の例では、jQuery.mobile.changePage( "#bar")を呼び出してページをサブページ 'bar'に切り替えるようにします。 Divの "#bar"がdiv ".container"にネストされているために起こっていることはありません。 –

関連する問題