jQuery Mobile Toolbars
Toolbar-Elemente werden oft innerhalb von Kopf- und Fußzeilen platziert - für "easy-access" Navigation:
Kopf Bars
Der Header wird an der Spitze der Seite befindet und enthalten in der Regel einen Seitentitel / Logo oder ein oder zwei Tasten (in der Regel zu Hause, Optionen oder Suche).
Sie können Tasten auf der linken Seite und / oder auf der rechten Seite in dem Header hinzuzufügen.
Der folgende Code wird eine "Home" -Taste auf der linken Seite hinzufügen und eine Schaltfläche "Suchen" auf der rechten Seite des Kopftiteltext:
Beispiel
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Versuch es selber " Der folgende Code wird nur eine Taste an der linken Seite des Kopf Titel hinzufügen:
Beispiel
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Versuch es selber " Der folgende Code wird nur auf einen Knopf an der rechten Seite des Kopf Titel hinzufügen:
Beispiel
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Versuch es selber " Ein Header kann ein oder zwei Tasten enthalten, während die Fußzeile hat keine Grenze.
Footer Bars
Die Fußzeile wird am unteren Rand der Seite befindet.
Die Fußzeile ist flexibler als der Header - es funktionell und veränderbar ganzen Seiten, und deshalb so viele Tasten je nach Bedarf enthalten:
Beispiel
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Versuch es selber " Tipp: Die Schaltflächen in der Fußzeile werden nicht standardmäßig zentriert. Um dies zu beheben, verwenden Sie einfach CSS:
Sie können auch Gruppentasten in der Fußzeile horizontal oder vertikal:
Beispiel
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Versuch es selber " Positionierung von Kopf- und Fußzeilen
Die Kopf- und Fußzeilen kann auf drei Arten positioniert werden:
- Inline - Standard. Kopf- und Fußzeilen sind inline mit dem Seiteninhalt
- Fixed - Kopf- und Fußzeilen bleiben am oberen und unteren Rand der Seite positioniert
- Fullscreen - Verhält sich wie festgelegt; Kopf- und Fußzeilen bleiben an der Ober- und Unterseite, sondern auch über den Seiteninhalt positioniert. Es ist auch leicht see-through
Verwenden Sie die Daten-Position Attribut Ihre Kopf- und Fußzeilen zu positionieren:
Inline-Position (Default)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Versuch es selber " Fixierte Position
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Versuch es selber " So aktivieren Sie die Vollbild-Position, die Verwendung daten position = "fixed" und fügen Sie die Daten-Vollbild-Attribut für das Element:
Vollbild-Position
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Versuch es selber " Tipp: Die Vollbild - Position ist ideal für Fotos, Bildern und Videos.
Tipp: Um den Bildschirm tippen , wird ein- und ausblenden Kopf- und Fußzeilen für festen und Vollbild - Positionen.
Mehr Beispiele
Es werden nur das Symbol in Symbolleisten
Mit dem ui-btn-icon-notext Klasse nur das Symbol in Kopf- und Fußzeile Schaltflächen angezeigt.