En-tête persistant dans JQuery Mobile

Ajoutez les CSS suivants à votre page ou au bas du fichier CSS

Veuillez noter que je n'ai pas testé ce code sur les appareils mobiles. P>

 <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>

Un peu de jQuery fera le tour xxx

1) Outre les fichiers jQuery.js, jquerymobile.js et .css dossiers télécharger et incluent: jquery.ase.1.3.js, jquery.mobile.scrollview.js et scollview.js. (Google)

2) En-tête standard, ListView et Footer avec attribue de style ci-dessous: xxx

comme décrit en détail ici .

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

Il y a un exemple de faire avec un pied de page ici: http : //jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

Je n'ai pas eu la chance de l'essayer, mais cela devrait fonctionner de la même manière avec un en-tête.

J'essaie de regarder dans JQuery Mobile Source, la magie du pied de page persistant se produit ici, je pense. XXX PRE>

Je pense à ajouter P>

setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );

Salut, il pourrait être en retard mais cela a fonctionné pour moi. XXX PRE>

Votre HTML P>

<div data-role="page">
    ....Your content....
    <div class="footerPlaceHolder"></div>
    <div data-role="footer"> 
        <a href="#" data-icon="arrow-l" class="ui-btn-left">Back</a>
        <a href="#" onclick="settingsClicked(this);" data-icon="gear" class="ui-btn-right">Settings</a> 
    </div>
</div>

Si vous pouvez obtenir avec une seule en-tête partagée unique, vous pouvez fournir l'en-tête dans votre page principale: (Remarque: Non JQuery impliqué, désolé "il suffit d'utiliser jQuery" gars :-p) xxx pré>

Utilisez ensuite CSS pour appuyer sur le haut de chaque page vers le bas: P>

.ui-page{
    top:64px !important;
}

Je pense que cela est ajouté à JQM récemment. http: //view.jquérymobile .COM / 1.3.2 / DIST / DEMOS / WIDGETS / Barres à outils fixes / Footer-Persist-A.HTML

Ce lien dit clairement que vous pouvez ajouter l'attribut Data-ID aux deux. En-tête et pied de page. Mais cela ne fonctionne pas pour moi.

EDIT: J'ai remarqué que vous devez activer la transition de la page pour l'en-tête persistant. Mais les transitions ralentissent trop l'application ...