JQuery Mobile implementiert Navigationsleiste und footer_jquery

Eine Navigationsleiste besteht aus einer Reihe horizontal angeordneter Links, normalerweise in der Kopf- oder Fußzeile.

Standardmäßig werden Links in der Navigationsleiste automatisch in Schaltflächen umgewandelt (data-role="button" ist nicht erforderlich).

Der Code für die Navigationsleiste wird im Allgemeinen in einem Div platziert, dessen Datenrolle der Header ist.

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>

Ein einfacher Navigationsbarcode sieht wie oben aus, einschließlich zwei Schaltflächen und einer Textzeile als Titel. Das Datensymbol kann das kleine Symbol definieren, das der Schaltfläche entspricht. Wenn Sie möchten, dass die Schaltfläche rechts vom Text platziert wird, können Sie den Stil „class="ui-btn-right" hinzufügen. Es ist zu beachten, dass der Navigationsbereich (im Header) in Jquery Mobile nur zwei Schaltflächen enthalten kann. (Wie Sie sich vorstellen können, verfügt die allgemeine Navigation in mobilen Apps nicht über allzu viele Schaltflächen und diese befinden sich normalerweise in der Fußzeile.)

Im Gegensatz dazu gibt es keine Begrenzung für die Anzahl der Schaltflächen in der Fußzeile. Der Grundcode lautet wie folgt:

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> 
</div>

Dies entspricht dem allgemeinen Designmuster für mobile Apps. Unten befinden sich Schaltflächen zum Wechseln zu verschiedenen Seiten. Der Weg zum Wechseln der Seiten ist ebenfalls sehr einfach. Beachten Sie, dass die darin enthaltene href, wie bereits erwähnt, einfach nach der href-ID hinzugefügt werden kann Das heißt, das Div, dessen Datenrolle die Seite ist, kann den Sprung abschließen. Für den Sprungprozess sind viele Animationseffekte in jquery mobile integriert, die später vorgestellt werden.

In Bezug auf Kopf- und Fußzeilen können Sie zusätzlich zu den oben genannten auch das Attribut data-position verwenden, um deren Positionsattribute zu definieren, einschließlich der folgenden drei optionalen Werte (von: w2cschool):

Inline – Standard. Kopf- und Fußzeilen sind mit dem Seiteninhalt verknüpft.

Behoben – Kopf- und Fußzeile bleiben oben und unten auf der Seite.

Vollbild – Ähnlich wie bei „Fest“; die Kopf- und Fußzeile bleiben oben und unten auf der Seite, aber auch über dem Seiteninhalt ist sie leicht durchsichtig.

Hier werde ich Ihnen das relevante Wissen über die Implementierung von Navigationsleiste und Fußzeile in jQuery Mobile vorstellen. Ich hoffe, es wird Ihnen hilfreich sein!