Encabezado fijo en Jqtouch

Question

¿Qué debo cambiar en el basic theme de jqtouch para tener un encabezado fijo (+ pie de página tal vez ...)? He intentado con la posición: solucionado ... pero nada funcionó ...

Answer 1

Mobile Safari no es compatible con la posición: fijo (al menos no de una manera que lo hace útil para el desarrollo web).

Alternativamente, usted podría tratar de poner en práctica this javascript solution

Answer 2

Como señaló Thomas no hay apoyo para esto en la versión actual de Safari Mobile que se ejecuta en el iPhone.

Si está utilizando jQTouch de todos modos, eche un vistazo a la extensión "flotante" que viene incluida con las últimas descargas. Agrega un div flotante que se mueve junto con su desplazamiento, aunque con cierto retraso. El comportamiento es muy similar a la barra de "archivo" en la interfaz móvil de GMail.

Aquí está la página de extensiones de jQTouch que menciona vaporoso: http://code.google.com/p/jqtouch/wiki/Extensions

sólo tiene que descargar el último paquete y todo está allí. No es una solución perfecta, pero es mejor que nada.

Answer 3

Salida este plugin para jQTouch - http://code.google.com/p/jqtscroll/

Answer 4

Echa un vistazo a este sitio: http://demo.lvengine.net/mobileuplink

Note que usa un div extra:

<div id="jqt"> 

Tome un vistazo a los archivos JavaScript y CSS desde este sitio. El autor modificó los scripts jqtouch originales un poco para ajustarse a esta modificación.

Para un pie de página "fijo", p. barra de pestañas, que sólo tiene que añadir un div Además, al mismo nivel que el 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> 

A continuación, el código de css para .tabbar. El uso de minas como ejemplo:

.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

Tenga una mirada en DataZombies jQtouch Fork - sus mejoras son realmente fresco y se incluyen las cabeceras y pies de página fijos!

=>Tabbar Demo

Parece que utiliza iScroll, lo que podría ser el uso de forma independiente también.

Answer 6

estoy trabajando en mi versión, para agregar una barra de pestañas fija en jQtouch http://www.itabbar.com

es trabajar con jQtouch, iScroll y la iTabbar

Aquí un online demo (sólo Safari y Chrome para navegadores de escritorio)