come mantenere fisso l'header e il footer del jquery mobile?

Question

Sto creando un sito Web utilizzando jQuery Mobile.

Come mantenere fisso l'intestazione e il piè di pagina mobile jQuery? Voglio solo che il contenuto scorra (proprio come succede nelle applicazioni iPhone) e che le intestazioni ei piè di pagina siano fissi in alto e in basso.

Qualche suggerimento?

Answer 1

Aggiungere questo attributo al div intestazione/piè di pagina:

 <div data-role="header" data-position="fixed"> 
      <h1>Header Page 1</h1> 
     </div> 

Inoltre, si potrebbe avere uno sguardo a questo: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Answer 2

Un'altra opzione è il check-out iScroll: http://cubiq.org/iscroll

Answer 3

Il il problema che ho riscontrato con jquery mobile è che l'intestazione e il piè di pagina svaniscono. Immagino che questo sia qualcosa che correggeranno in futuro, ma in aggiunta a iscroll suggerito da Dan, c'è anche jquery mobile scrollview e wink toolkit. Ho avuto buoni risultati con jQuery ScrollView mobile, ma senza fortuna con iscroll o occhiolino

1) jQuery Mobile Scrollview

• Demo: http://jquerymobile.com/test/experiments/scrollview/
• Codice: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

2) Occhiolino Toolkit

• Esercitazione: http://www.winktoolkit.org/tutorials/119/
• Demo: http://www.winktoolkit.org/documentation/wink/ui/layout/scroller/test/test_scroller4.html?theme=default

Answer 4

Un altro modo è quello di utilizzare http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html (jquery.mobile.scrollview.js, scrollview.js, e easing.js) e mettere i dati-scroll = "true" nel tag div pagina come suggerito qui: scrollview for jQuery mobile tollbars *not* to be fixed.

Ha funzionato bene per me finora.

Cheers,

E

Answer 5

Usa iScroll v4. Mantieni fissa intestazione e piè di pagina e scorri solo il contenuto. iScroll ha bisogno di un DIV wrapper e di un elemento figlio. Nell'esempio seguente content_items è il div bambino con gli elementi da scorrere. Ho notato che non è possibile combinare data-role = "content" e il wrapper DIV per iScroll in un elemento HTML !.

Answer 6

ti consiglio di provare l'ultima versione jquery-mobile (1.1.0-rc). ha risolto questo bug.

uno sguardo here

Answer 7

Per iOS 6, 7 e 8, questo hack sembra risolvere il problema e innescare un redraw per sostituire correttamente l'intestazione fissa (con o senza pannello) su iPod, iPhone e iPad. Nota: testiamo per dispositivo iOS e aggiungiamo solo questo evento in quel caso *.

if (iOS()) { 
    $(document).on('blur', 'input:not(:submit), select, textarea', function() { 
     var paddingBottom = parseFloat($(".ui-mobile-viewport, .ui-page-active").css("padding-bottom")); 
     $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", (paddingBottom + 1) + "px"); 
     window.setTimeout(function() { 
      $(".ui-mobile-viewport, .ui-page-active").css("padding-bottom", paddingBottom + "px"); 
     }, 0); 
    }); 
} 

* Test per iOS:

var iOS() = function() { 
    var userAgent = window.navigator.userAgent.toLowerCase(); 
    return (/iphone|ipad|ipod/).test(userAgent); 
} 

Answer 8

Per abilitare questo tipo caratteristica barra degli strumenti, si applica l'= attributo data-fullscreen "vera" e la posizione di dati = attributo "fisso" sia al elementi di intestazione e piè di pagina div. Il quadro sarà anche disinserire l'imbottitura per il contenitore di contenuti (ui-content)

<div data-role="header" data-position="fixed" data-fullscreen="true"> 
     <h1>Header Page 1</h1> 
    </div>