Struktur für Seitenbereiche bei jQuery Mobile Seiten - Bereich für Kopf, Inhalt, Fuß
eine jQuery Mobile Seite
Damit die Inhalte sowohl auf normalen Computern wie auch auf mobilen Geräten bestmöglich angezeigt werden, werden den HTML-Elementen zusätzliche Informationen mitgegeben.
Dies geschieht über das HTML5-Attribut data-* - somit kann jQuery Mobile die Elemente einerseits optimal anzeigen und zusätzlich bei mobilen Geräte diese Elemente mit den üblichen touch-Aktionen versehen.
Aber der Reihe nach. Wir haben auch hier einen Grundaufbau, der für jede jQuery Mobile Page gleich ist. Wir unterteilen jede Einzelseite in 3 Bereiche:
- Kopfbereich
- Inhaltsbereich
- Fußbereich
Dies geschieht über das Attribut data-role. Im Folgenden ein komplettes Beispiel (das HTML-Grundgerüst für den <head> einfach dazu kopieren:
<body>
<div data-role="page">
<div data-role="header">
<h1>Bereich Kopf</h1>
</div>
<div data-role="main" class="ui-content">
<p>Bereich Inhalt</p>
</div>
<div data-role="footer">
<h1>Bereich Fuß</h1>
</div>
</div>
</body>
Jetzt die Erklärung für die einzelnen Anweisungen:
Einzelne data-role-Elemente für Gliederung der Einzelseitenstruktur
<div data-role="page">
Alles innerhalb von diesem DIV-Bereich wird als Seite im Browser angezeigt. Dabei wird diese Seite in mehrere Bereiche untergliedert wie Kopf-, Inhalts- und Fußbereich, die im Folgenden kommen.
<div data-role="header">
Der Kopfbereich, in dem i.d.R. der Titel der Anwendung angezeigt wird und ein Suchfeld. Oder die wichtigsten Steuerungspunkte kann dort untergebracht werden.
<div data-role="main">
Der Inhaltsbereich wird durch "main" gekennzeichnet. Hier wird dann der Inhalt wie Text, Bilder und Videos, Buttons, Formulare usw. untergebracht.
<div data-role="main" class="ui-content">
Durch die Klasse "ui-content" wird ein Abstand (padding/margin) zwischen den Außenrändern und den Inhalt erzeugt.
<div data-role="footer">
Fußbereich am unteren Bereich der Seite.
Innerhalb aller Container können beliebige HTML-Befehle genutzt werden.
Unser bisheriges Ergebnis auf einem Handy:
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: