En-tête fixe dans Jqtouch

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

OriginalL'auteur Wojciech Bednarski

Prendre un coup d'oeil à ce site:
http://demo.lvengine.net/mobileuplink

Note qu'il utilise un extra div:

<div id="jqt">

Prendre un coup d'oeil à la javascripts et css de ce site. L'auteur a modifié l'original jqtouch scripts un peu pour s'adapter à cette modification.

Pour un "fixe" pied de page, par exemple, la barre d'onglets, il vous suffit d'ajouter un complément div au même niveau que le 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>

Puis le code de la css .tabbar. L'utilisation de mines, comme par 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%;}

OriginalL'auteur William Niu

Comme Thomas l'a souligné il n'y a pas de support pour ce dans la version actuelle de Safari Mobile qui fonctionne sur iPhone.

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

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

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

OriginalL'auteur Henrik Joreteg