JQuery mobile bottom-navbar aka sticky footer

JQuery Mobile bietet zwei Möglichkeiten für sticky footer navbars. "Inline" - die werden einfach in die Seite, wo immer das erklärte und "Fixed", welche Art von machen es klebrig, wenn Sie nicht scrollen. Sobald du scrollst, verschwindet es. Ich fand dieses Verhalten sehr unzuverlässig.

Offenbar die Khan academy hat es herausgefunden aber aus irgendeinem Grund kann ich eigentlich nicht besuchen Sie die mobile Website, die mit openapp mkt:
http://www.jqmgallery.com/2011/03/07/khan-academy/

Ich weiß, andere haben gebeten, diese aber jQuery Mobile ist jetzt anders:
jQuery Mobile: Stick footer unten auf der Seite

Später könnte ich nur versuchen, messing mit CSS-layout (das habe ich versucht zu vermeiden, um nicht zu brechen, jquery mobile)
http://ryanfait.com/sticky-footer/

  • So weit wie ich kann, verstehen Sie nicht möchten, dass Fußzeile/navbar verschwinden, richtig? Ich beantwortet habe eine ähnliche question gestern. Hoffe, es hilft.
  • Ihrer ein Meister des Lebens. Ich werde es die CSS Weg, aber das sieht aus wie die jQuery-Mobile Weg, es zu tun. Genau das, was ich wollte!!!
  • Gent: ich wünschte, ich war 😉
  • Ahh Mist ich dachte, dass dies funktioniert. Ich dachte, es Tat, aber es scheint, dass die Kopf-und Fußzeile immer noch verschwinden, wenn ich scrollen. Ich weiß nicht, warum JQM dachte, das war eine gute Standard-Verhalten. Siehe auch stackoverflow.com/questions/6962961/...
  • Das sieht vielversprechend aus: github.com/neave/touch-scroll
  • Gent: Gut, es stört mich nicht, bis er kommt zurück, wenn ich fertig bin, um zu scrollen.
  • Sie können einen Blick auf diese Antwort hier: stackoverflow.com/questions/6861764/...

InformationsquelleAutor Adam Gent | 2011-08-03
  2. 1

    http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

    In Browsern, die CSS unterstützen position: fixed (die meisten desktop-Browsern, iOS 5+, Android 2.2+, BlackBerry 6 und andere), die Symbolleisten, verwenden Sie die "fixedtoolbar" - plugin behoben werden, um den oberen oder unteren Rand des Viewports, während der Inhalt der Seite scrollt frei dazwischen. In Browsern, die keine Unterstützung für Feste Positionierung der Symbolleisten bleiben positioniert, fließen, bei den oberen oder unteren Rand der Seite.

    Um dieses Verhalten zu aktivieren, der auf eine Kopf-oder Fußzeile, fügen Sie die data-position="fixed" - Attribut, um eine jQuery-Mobile-header-oder footer-element.

    Festen header-markup Beispiel:

    <div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

    Festen footer-markup Beispiel:

    <div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>
    InformationsquelleAutor Sal B
  3. 0

    Dies ist keine Feste position der Fußzeile. Die Fußzeile, die offscreen sind, wenn der Inhalt der Seite größer ist als der Bildschirm. Ich denke, es sieht besser so.

    Den Körper und .ui-page-min-Höhe und Höhe sind notwendig, um zu verhindern, dass die Fußzeile aus, springen nach oben und unten während der übergänge.

    Arbeitet mit der neuesten JQM-version ab sofort 1.4.0

    body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}
    InformationsquelleAutor ArcadeRenegade
Schreibe einen Kommentar