jQuery Mobile Seitenstruktur

Nachdem ich die ersten Grundlagen des Aufbaus einer Webseite mit jQuery Mobile erklärt habe, geht es nun um die Gestaltung des Seiteninhaltes.

Gridlayout

Eine Möglichkeit, den Inhalt einer jQuery Mobile Webseite effektiv zu strukturieren ist das Gridlayout. Dazu wird ein div-Container mit <div class="ui-grid-a"></div> erstellt. Dabei gibt es mehrere Möglichkeiten:

• <div class="ui-grid-a"></div> erstellt eine zweispaltige Struktur
• <div class="ui-grid-b"></div> eine dreispaltige
• <div class="ui-grid-c"></div> eine vierspaltige und
• <div class="ui-grid-d"></div> schließlich eine fünfspaltige Struktur

Innerhalb dieses div-Containers werden die einzelnen Spalten in div-Container mit <div class="ui-block-a"></div> eingebettet. Die nächste Spalte ist dann ui-block-b usw. Der gesamte Inhaltsbereich:

<div data-role="content">	
  <p>Auf dieser Seite sind die Buttons kleiner und in drei Blöcken nebeneinander gruppiert.</p>
  <div class="ui-grid-b">
    <div class="ui-block-a">
      <h3>Linker Block</h3>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="home">home</a>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="delete" data-theme="a">delete</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="plus" data-theme="b">plus</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-u" data-theme="c">arrow-u</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-d" data-theme="d">arrow-d</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="check" data-theme="e">check</a>		
    </div>
    <div class="ui-block-b">
      <h3>Mittlerer Block</h3>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="gear">gear</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="grid">grid</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="star">star</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="custom">custom</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r">arrow-r</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="minus">minus</a>		
    </div>
    <div class="ui-block-c">
      <h3>Rechter Block</h3>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="refresh">refresh</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="forward">forward</a>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="back">back</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="alert">alert</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="info">info</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="search">search</a>
    </div>
  </div><!-- Ende grid-b -->
</div><!-- Ende content -->

So sieht dann eine Seite mit Gridlayout aus.

Klappbare Inhaltsblöcke

Ein beliebtes Mittel zur platzsparenden Darstellung sind Inhaltsblöcke, die sich auf- und wieder einklappen lassen. Diese werden mit der data-role="collapsible" erzeugt. Ein vollständiger Block sieht so aus:

<div data-role="collapsible">
   <h3>Ich bin die Überschrift</h3>
   <p>Hier steht der Inhalt.</p>
</div>

Diese zusammenklappbaren Inhaltsblöcke können auch ineinander verschachtelt sein.

Accordion

Während bei den klappbaren Inhaltsblöcken die einzelnen Blöcke unabhängig von einander sind, besteht ein Accordion immer aus einem Set solcher Blöcke. Dieses Set wird mit data-role="collapsible-set" zusammengefasst. Typisch für die Blöcke in so einem Accordion Set ist, dass jeweils immer nur ein Block aufgeklappt ist. Dafür sorgt jQuery Mobile automatisch. Wenn einer dieser Blöcke bereits beim Öffnen der Seite im aufgeklappten Zustand angezeigt wird, dann bekommt er den Zusatz data-collapsed="false". Der Inhaltsbereich der Beispielseite hat den folgenden Quellcode:

<div data-role="content">	
  <p>Auf dieser Seite sind die Buttons in drei Accorion-Blöcken angeordnet.</p>
  <div data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="false">
      <h3>Erste Gruppe der Buttons</h3>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="home">home</a>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="delete" data-theme="a">delete</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="check" data-theme="e">check</a>		
    </div>
    <div data-role="collapsible">
      <h3>Zweite Gruppe der Buttons</h3>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="gear">gear</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r">arrow-r</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="minus">minus</a>		
    </div>
    <div data-role="collapsible">
      <h3>Dritte Gruppe der Buttons</h3>
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="refresh">refresh</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="info">info</a>		
      <a href="#" data-role="button" data-inline="true" data-mini="true" data-icon="search">search</a>
    </div>
  </div><!-- Ende collapsible-set -->
</div><!-- Ende content -->

Und so sieht die Beispielseite mit Accordion aus.

Alle bisherigen Beispiel bezogen sich auf eine Seite, damit meine ich, dass data-role="page" genau ein Mal im Code enthalten war. Schauen wir uns jetzt an, wie jQuery Mobile mit mehreren Seiten funktioniert.