Intestazione fissa in Jqtouch

Question

Cosa devo cambiare nello basic theme di jqtouch per avere un'intestazione fissa (+ footer + ...)? Ho provato con posizione: risolto .. ma non ha funzionato ...

Answer 1

Mobile Safari non supporta la posizione: fissa (almeno non in un modo che lo rende utile per lo sviluppo web).

In alternativa si potrebbe provare a implementare this javascript solution

Answer 2

Come ha sottolineato Thomas fuori non c'è alcun supporto per questo nella versione attuale di Safari Mobile che gira su iPhone.

Se si utilizza comunque jQTouch, dare un'occhiata all'estensione "fluttuante" fornita in dotazione con gli ultimi download. Aggiunge un div flottante che si muove insieme allo scrolling, anche se con un certo ritardo. Il comportamento è molto simile alla barra "archivio" nell'interfaccia GMail mobile.

Ecco la pagina delle estensioni su jQTouch che cita fluttuante: http://code.google.com/p/jqtouch/wiki/Extensions

Basta scaricare l'ultimo pacchetto e tutto è lì. Non è una soluzione perfetta, ma è meglio di niente.

Answer 3

Partenza questo plugin per jQTouch - http://code.google.com/p/jqtscroll/

Answer 4

Date un'occhiata a questo sito: http://demo.lvengine.net/mobileuplink

Nota che utilizza un div in più:

<div id="jqt"> 

Date un'occhiata ai javascript e css da questo sito. L'autore ha modificato gli script jqtouch originali un po 'per adattarsi a questa modifica.

Per un piè di pagina "fisso", ad es. barra delle schede, è sufficiente aggiungere un div Oltre allo stesso livello di div # jqt:

<div id="other"> 
    <div class="tabbar"> 
     <ul> 
      <li class="two"><a href="first.html">first tab</a></li> 
      <li class="two"><a href="two.html">second tab</a></li> 
     </ul> 
    </div> 
</div> 

Poi codice il css per .tabbar. Utilizzare il mio come ad esempio:

.tabbar 
{ 
    position: absolute; 
    bottom:0px; 
    width:100%; 
    height:48px; 
    border-top:1px solid #444; 
    overflow:hidden; 
    padding: 0; 
    margin: 0; 
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); 
} 

.tabbar li 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: smaller; 
    display: block; 
    text-align: center; 
    border-right:1px solid #333; 
    border-left:1px solid #6a6a6a; 
} 

.tabbar li:first-child 
{ 
    border-right:1px solid #333; 
    border-left:0; 
} 

.tabbar li:last-child 
{ 
    border-right:0; 
    border-left:1px solid #6a6a6a; 
} 

.tabbar ul 
{ 
    border: 0; 
    margin: 0; 
    list-style: none; 
} 

.tabbar a 
{ 
    padding: 0; 
    margin: 0; 
    display:block; 
    text-decoration:none; 
    font-size: 0.8em; 
    color:#eee; 
    line-height:1.6em; 
} 

.tabbar li.two  {width: 50%;} 

Answer 5

Dai un'occhiata alla DataZombies jQtouch Fork - i suoi miglioramenti sono davvero cool e comprendono le intestazioni e piè di pagina fissi!

=>Tabbar Demo

Sembra che usa iScroll, che potrebbe essere utilizzato indipendentemente.

Answer 6

sto lavorando sulla mia versione, per aggiungere una barra delle linguette fisso sul jQTouch http://www.itabbar.com

si sta lavorando con jQTouch, iScroll e l'iTabbar

Ecco un online demo (solo Safari e Chrome per il browser desktop)