Мне удалось решить эту проблему с помощью следующего подхода. Это стало возможным благодаря ответу Миккеля, поэтому спасибо, что поделились этим!
/* */
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 предотвратили его неправильное поведение, но, возможно, это то, к чему другие должны быть осторожны.
Мой нижний колонтитул не является фиксированной позицией, которая может выглядеть по-разному или реагировать на это, но, возможно, это также поможет вам.