En-tête fixe dans Jqtouch

Question

Que dois-je changer dans le basic theme de jqtouch pour avoir un en-tête fixe (+ pied de page peut-être ...)? J'ai essayé avec la position: fixe .. mais rien n'a fonctionné ...

Answer 1

Mobile Safari ne supporte pas la position: fixe (au moins pas d'une manière qui le rend utile pour le développement web).

Sinon, vous pouvez essayer de mettre en œuvre this javascript solution

Answer 2

Comme Thomas a souligné qu'il n'y a pas de soutien pour cela dans la version actuelle de Safari Mobile qui fonctionne sur iPhone.

Si vous utilisez jQTouch de toute façon, jetez un oeil à l'extension "floaty" qui est livré avec les derniers téléchargements. Il ajoute une div flottante qui se déplace avec votre défilement, mais avec un certain retard. Le comportement est très similaire à la barre "archive" dans l'interface mobile GMail.

Voici la page des extensions sur jQTouch qui mentionne vaporeuse: http://code.google.com/p/jqtouch/wiki/Extensions

Il suffit de télécharger le dernier paquet et tout est là. Ce n'est pas une solution parfaite, mais c'est mieux que rien.

Answer 3

Découvrez ce plugin pour jQTouch - http://code.google.com/p/jqtscroll/

Answer 4

Jetez un oeil à ce site: http://demo.lvengine.net/mobileuplink

Notez qu'il utilise un div supplémentaire:

<div id="jqt"> 

Jetez un oeil à la javascripts et CSS de ce site. L'auteur a modifié un peu les scripts jqtouch originaux pour s'adapter à cette modification.

Pour un pied de page "fixe", par ex. barre d'onglets, vous ajoutez simplement un div d'addition au même niveau que 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> 

code, puis le css pour .tabbar. Utilisez le mien comme exemple:

.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

Jetez un oeil à DataZombies jQtouch Fork - ses améliorations sont vraiment cool et incluent les en-têtes et pieds de page fixes!

=>Tabbar Demo

Il semble qu'il utilise iScroll, qui pourrait être utilisé de façon indépendante aussi bien.

Answer 6

je travaille sur ma version, pour ajouter une barre d'onglets fixe sur jQTouch http://www.itabbar.com

il travaille avec jQTouch, iScroll et iTabbar

Voici un online demo (uniquement Safari et Chrome pour le navigateur de bureau)