我在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 -->
答案 0 :(得分：2)
我几天来一直在反对这个问题，而谷歌一直没有帮助。我终于想出了以下解决方案。它在转换开始之前将标题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"添加到页脚，然后像平常一样将其放置在内容中。
答案 1 :(得分：1)
这就是我的方式，仅仅是页脚。删除属性是为了防止初始化代码执行两次，从而导致块中出现多个跨距。此方法将所有类样式保留在元素上以进行样式设置。另一个好处是代码只需要在pagecreate上运行一次以附加页脚。
$('div.ui-page:not(#mainPage)').live('pagecreate', function(event) {
if ($(event.currentTarget).find('footer').length == 0)
{
var footer = $('#footerNavBar').html();
$(event.currentTarget).append( '<footer class="footerNavBar">' +footer + '</footer>');
$(event.currentTarget).find('.ui-navbar').removeAttr('data-id').removeAttr('data-role').removeAttr('role');
}
});
<div data-role="page" id="mainPage">
<header data-role="header" data-position="inline" id="mainHeader">
<h1>
<img src="images/icon.png" alt="icon" />
</h1>
</header>
<section data-role="content">
</section>
<footer data-role="footer" data-position="fixed" id="footerNavBar">
<div data-role="navbar" data-id="footerNavBar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="bottom" data-prefetch>Home</a></li>
<li><a href="link2.html">Link 2</a></li>
</ul>
</div>
</footer>
</div>
答案 2 :(得分：0)
我发现将tabbar（页脚）放在jqt div之外效果很好。
我的DZ / jQT分叉 - ＆gt; https://github.com/DataZombies/jQTouch
演示 - ＆gt; http://web.me.com/djpinter1/iPhone/jqtouch/demos/main_tabbar/
答案 3 :(得分：-1)
我能够通过以下方法解决这个问题。 Mikkel的回复使得这一切成为可能，所以感谢您分享！
/* */
function prepareHeaderFooterForULDiving(pageName) {
// dynamically move the header and footer between pages on load events
$(document).bind('pagebeforeshow', function(event, ui) {
// If the previous page length is zero then we couldn't possibly be drilling into a nested list this very moment
if (ui.prevPage.length == 0) return;
var pathname = window.location.pathname;
var fullPath = $(location).attr('href');
//alert (pathname +" versus1 "+fullPath);
// Don't add an extra header and footer to a page that doesn't need it
// The pathname must end with the page name and the fullPath must NOT end with .php (all nested list pages will have extra pieces)
var regex = new RegExp(pageName+"$");
if (pathname.match(regex) && !fullPath.match(/.php$/)) {
$headerObj = $('[id^=header]:last');
$footerObj = $('[id^=footer]:last');
// Since we find the latest header and footer (and since that latest one might be the one we want to display
var beginningState = event.currentTarget.innerHTML;
var beginningHeader = $headerObj[0].outerHTML;
var beginningFooter = $footerObj[0].outerHTML;
// Before we copy the header and footer, find out if we are copying a copy or not; if we are,
// make sure we add special handling to get rid of the first copy when we hide the current page
var alreadyHadClass = $headerObj.hasClass('to-remove');
// copy the code from the current header and footer but before you clone it, add the to-remove class to it; that way
// we only end up removing the footers and headers that we have dynamically added!
// Get the latest header and footer; there's a possibility the header would be grabbed from a prior loaded page that isn't presently visible (and with a misleading phrase)
// Multiple layers of ULs could end up causing the wrong footer to be removed
$headerObj.addClass('to-remove');
$footerObj.addClass('to-remove');
var header = $headerObj[0].outerHTML;
var footer = $footerObj[0].outerHTML;
// Now that we know that we are going to be drawing on this particular branch of the contactUs.php UL leaf, mark every previous
// leaf (if applicable in higher or lower part of the tree) for immediate removal once the page is hidden
// Do NOT do this before we clone
if (alreadyHadClass) {
$('.to-remove').addClass('removeOncePageHidden');
}
// Remove the temporary designation; this way we don't accidentally remove contactUs.php's header when we return
$headerObj.removeClass('to-remove');
$footerObj.removeClass('to-remove');
// Optionally, you could remove the auto-generated header (with the next ul's content); but I kinda like it
// remove the jQuery Mobile-generated header
//$('.ui-header').addClass('to-remove-now');
//$('.to-remove-now').remove();
// For some crazy reason this pagebeforeshow can be fired TWICE! Ridiculous I know; only update the screen if it doesn't
// already look like that. Otherwise, you'll end up with a flashing of an instant where the first-added header and footer
// display and then get removed during the pagehide
if ( beginningState.indexOf(beginningHeader) != -1 || beginningState.indexOf(footer) != -1 ) {
// this script has just been fired twice and the header that we copied we don't need any more; the page is fine except that we just removed the class that needs to stay there
console.log("Didn't do it!");
$headerObj.removeClass('removeOncePageHidden');
$footerObj.removeClass('removeOncePageHidden');
} else if ( beginningState.indexOf(header) == -1 && beginningState.indexOf(footer) == -1 ) {
// prepend the header and append the footer to the generated HTML
console.log("weird: "+header+"\nbut the kicker: "+beginningState);
event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer;
} else {
// We didn't just create a new one so undo the addition of the 'remove it now' Class; we'll
// go ahead and keep it since this code has been fired twice now for one page load
console.log("whoah");
$headerObj.removeClass('removeOncePageHidden');
$footerObj.removeClass('removeOncePageHidden');
}
}
});
$(document).bind('pagehide', function(event, ui) {
$('.removeOncePageHidden').remove();
var fullPath = $(location).attr('href');
//alert ("Should we remove anything here: "+fullPath);
// We only need to run this code when we're navigating into a page that is a top-level page (nested-list-generated pages have 'fun' characters appended beyond the .php)
if (fullPath.match(/.php$/)) {
//alert("Removing all to-removers");
$('.to-remove').remove();
}
});
}
这是我第一次涉足jquerymobile脚本，因此可能存在一些我不知道的问题，但我所有的导航尝试都成功地生成了我正在搜索的行为。一个奇怪的事情是，即使在我离开我的联系人页面之后，脚本似乎仍在继续发射。我的if语句使它不会行为不端，但也许是其他人需要警惕的事情。
我的页脚不是固定的位置，似乎可能有不同的行为或对此的反应，但也许这也会对你有所帮助。