JQuery Mobile data-ajax = false的歷史記錄

Question

使用JQMobile構建移動網站。由於項目的規模，我決定採用多頁面方式（多個html文件）。不過，我正在構建的其中一個頁面更適合作爲具有多個div的html文件。爲了加載這些多個div，我不得不使用rel="external"或data-ajax="false"，以便它將所有的div與data-role="page"並列，而不僅僅是頁面上的第一個div。但是，這會打破JQMobile的歷史記錄，並在使用data-add-back-btn="true"時不再顯示後退按鈕。

有沒有人知道一個解決方案來拉多個div而不強制完全重新加載頁面？或者將兩種模式混合使用而保留JQMobile上的歷史？

Answer 1

工作實施例：

• http://jsfiddle.net/phillpafford/bfpN8/12/
• http://jsfiddle.net/phillpafford/bfpN8/14/（與後退導航）

主HTML

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Demo Page</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <h2>Lorem Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper feugiat condimentum. Donec rutrum lectus tortor, et pharetra sapien. Sed sollicitudin lectus sed urna consectetur sagittis. Pellentesque at arcu dui. Curabitur molestie velit id neque mattis vestibulum. Sed sit amet ante at tellus volutpat tempor quis eu magna. Pellentesque elementum semper congue. Praesent vitae eros id ante dapibus commodo. Aliquam leo nisi, feugiat eu imperdiet sed, tincidunt in lacus. Praesent bibendum dapibus vestibulum. Fusce condimentum bibendum libero eu aliquet.</p> 
     <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;"> 
      <li><a href="http://jsfiddle.net/phillpafford/rGacN/4/embedded/result/" rel="external" data-transidiont="slide">Link 1 (External)</a></li> 
      <li><a href="#internal">Internal Link1</a></li> 
      <li><a href="#internal2">Internal Link2</a></li> 
      <li><a href="#internal3">Internal Link3</a></li> 
     </ul> 
    </div><!-- /content --> 
</div><!-- /page -->  

外部HTML

<div data-role="page"> 
    <div data-role="header"> 
     <a data-rel="back">Back</a> <!-- Here you add the data-rel --> 
     <h1>External Demo Page</h1> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <h2>Lorem Ipsum</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper feugiat condimentum. Donec rutrum lectus tortor, et pharetra sapien. Sed sollicitudin lectus sed urna consectetur sagittis. Pellentesque at arcu dui. Curabitur molestie velit id neque mattis vestibulum. Sed sit amet ante at tellus volutpat tempor quis eu magna. Pellentesque elementum semper congue. Praesent vitae eros id ante dapibus commodo. Aliquam leo nisi, feugiat eu imperdiet sed, tincidunt in lacus. Praesent bibendum dapibus vestibulum. Fusce condimentum bibendum libero eu aliquet.</p> 
    </div><!-- /content --> 
</div><!-- /page -->