Mobile Umsetzung von Navigationsleiste und Fußzeile (mit Code)

Dieses Mal werde ich Ihnen die Implementierung der Navigationsleiste und Fußzeile in Mobile vorstellen (mit Code). Was sind die Vorsichtsmaßnahmen für die Implementierung der Navigationsleiste und Fußzeile in Mobile? Werfen wir einen Blick darauf.

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 p platziert, dessen Datenrolle der Header ist.

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

Ein einfacher Navigations-Barcode 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 werden normalerweise in der Fußzeile platziert.)

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

<p 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> 
</p>

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 ist, p, dessen Datenrolle Seite ist) kann den Sprung abschließen. Der Sprungprozess verfügt über viele in jquery mobile integrierte Animationseffekte, die später vorgestellt werden.

In Bezug auf Kopf- und Fußzeilen können Sie zusätzlich zu den oben genannten auch das data-

position-Attribut 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 „Fixed“; die Kopf- und Fußzeile bleiben oben und unten auf der Seite, aber auch über dem Seiteninhalt ist sie leicht durchsichtig

Ich glaube Ihnen Ich habe den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Formularkomponenten im Mobile-Framework

Was sind die Unterschiede zwischen der Verwendung von jQuery Mobile? und Kendo UI

Das obige ist der detaillierte Inhalt vonMobile Umsetzung von Navigationsleiste und Fußzeile (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!