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: