mobile-safari - 嵌套列表上的 jqueryMobile 页脚

Question

我在 jQuery Mobile 测试应用程序中有一个嵌套列表。它有一个固定的页脚。

在我单击列表中的某个项目之前，效果很好。超出列表顶层的任何内容都没有页脚。

有没有办法在整个嵌套列表导航中保留页脚？

提前致谢。

亚当。

代码如下:

    <!-- ################ Menu Page  ##################### -->  

<div data-role="page" id="home" data-theme="a">
 <div data-role="header" data-position="inline">
  <h1>Menu</h1>
 </div>
 <div data-role="content">
  <ul data-role="listview">
    <li><a href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
    <li><a href="#">List</a> 
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
    <li><a href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
    <li><a href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
        <li><a href="index.html">List</a></li>
      </ul>
    </li>
  </ul>
 </div><!-- eof content -->
 <div data-role="footer" data-position="fixed" data-id="myfooter">
   <div data-role="navbar">
     <ul>
       <li><a data-icon="grid" data-iconpos="top" href="#home">Menu</a></li>
       <li><a data-icon="star" data-iconpos="top" href="#location">Location</a></li>
       <li><a data-icon="alert" data-iconpos="top" href="http://www.site.com" rel="external">Full Site</a></li>
       <li><a data-icon="grid" data-iconpos="top" href="#addpad">Pad</a></li>
       <li><a data-icon="info" data-iconpos="top" href="#more">More</a></li>  
     </ul>       
   </div><!-- /navbar -->  
 </div><!-- eof footer -->
</div><!-- eof page#home --> 

Answer 1

我已经为这个问题绞尽脑汁好几天了，而这一次 Google 却帮不上忙。我最终想出了以下解决方案。它在转换开始之前将标题 HTML 复制到新页面上，然后在转换完成后从前一页中删除代码。页眉和页脚仍会随着页面转换而移动，但即使在导航嵌套列表时它们也会持续存在。

// dynamically move the header and footer between pages on load events
$('div.ui-page').live('pagebeforeshow', function(event, ui) {
    // avoid duplicating the header on the first page load
    if (ui.prevPage.length == 0) return;

    // remove the jQuery Mobile-generated header
    $('.ui-header').addClass('to-remove-now');
    $('#header').removeClass('to-remove-now');
    $('.to-remove-now').remove();

    // grab the code from the current header and footer
    header = $('#header')[0].outerHTML;
    footer = $('#footer')[0].outerHTML;

    // mark the existing header and footer for deletion
    $('#header').addClass('to-remove');
    $('#footer').addClass('to-remove');

    // prepend the header and append the footer to the generated HTML
    event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
});

// remove header from previous page 
$('div.ui-page').live('pagehide', function(event, ui) {
    $('.to-remove').remove();
});

然后只需将 id="header" 添加到页眉 div 并将 id="footer" 添加到页脚，然后像平常一样将它们放置在内容中。