Question

使用JQMobile构建移动网站。由于项目的规模，我决定采用多页面方法（多个html文件）。但是，我正在构建的其中一个页面作为具有多个div的html文件更有意义。为了加载这些多个div，我被迫使用rel="external"或data-ajax="false"，以便它使用data-role="page"而不仅仅是页面上的第一个div来提取所有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 -->

关于data-ajax = false的JQuery Mobile History

1 个答案: