JQUERYMOBILE Pied de page sur la liste imbriquée

J'ai trouvé que mettre la barre à tabbar (pied de page) à l'extérieur de la JQT DIV fonctionne bien.

My DZ / JQT Fork -> https://github.com/datazombies/jqtouch < / p>

démo -> http://web.me.com/djpinter1 / iPhone / jqtouch / démos / main_tabbar /

J'ai frappé ma tête contre ce problème pendant plusieurs jours et une fois que Google n'était pas d'aide. J'ai finalement proposé la solution suivante. Il copie l'en-tête HTML sur une nouvelle page avant le début de la transition, puis supprime le code de la page précédente une fois la transition terminée. L'en-tête et le pied de page se déplaceront toujours avec la transition de la page, mais ils persisteront même tout en naviguant des listes imbriquées.

// 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();
});

Voici comment je suis allé à ce sujet, de pied de page seulement cependant. L'élimination de l'attribut est d'empêcher le code d'initialisation de l'exécution de deux fois supérieure à celle des blocs multiples dans les blocs. Cette méthode conserve tous les styles de classe sur les éléments de coiffage. Une autre chose belle est que le code doit fonctionner uniquement une fois sur PageCreate pour ajouter les pieds de page. XXX PRE>

. P>

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

J'ai pu résoudre ce problème avec l'approche suivante. Il a été rendu possible par la réponse de Mikkel alors merci de partager cela! XXX

Ceci est mon premier inconvénient dans les scripts JQuérymobile afin qu'il puisse y avoir un aspect problématique, je ne suis pas au courant, mais toute ma navigation Les tentatives ont réussi à générer le comportement que j'étais à la recherche de. Une chose curieuse était que le script semblait continuer à tirer, même après avoir quitté ma page de contact. Mes déclarations si elles ont empêché de mauvaise conduite, mais c'est peut-être quelque chose que d'autres devront se méfier.

Mon pied de page n'est pas une position fixe qui semble avoir un comportement ou une réponse différente, mais peut-être que cela vous aidera à cela. Eh bien.