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 -->