Kolumne: Dino talks

Grundlagen zu jQuery-Mobile-Seiten
Kommentare

Eine mobile Seite basiert meist auf einem einspaltigen Layout. In jQuery Mobile setzt sich eine Seite aus Header-, Footer- und Inhaltselementen zusammen. Die Bibliothek kümmert sich um Seitenübergänge und macht dort, wo es möglich ist, ausgiebig Gebrauch von Ajax. Deshalb weicht die Struktur einer solchen Seite etwas von der in klassischen Webanwendungen ab. Eine Seite in jQuery Mobile ist einfach ein DIV-Element mit bestimmten Spezialattributen und muss nicht unbedingt in einer separaten Datei untergebracht sein. Dieser Artikel beschreibt den Aufbau einer konformen, mobilen Seite mit einem Header, einem Footer und einer Listenansicht als Seiteninhalt.

jQuery Mobile

jQuery Mobile verändert die Granularität, mit der Entwickler eine Webseite implementieren: Normalerweise wird eine Seite in einer einzelnen HTML- oder Markup-Datei gespeichert. In jQuery Mobile kann eine Seite eine einzelne HTML-Datei oder ein interner Abschnitt – vorwiegend ein DIV-Element – einer vorhandenen Seite sein. Man bezeichnet die beiden Szenarien als Einzelseiten- und Mehrseiten-Template. Eine typische Seitendefinition sieht folgendermaßen aus:

...

Wie der folgende Code zeigt, kann eine einzelne HTML-Datei auch mehrere Elemente enthalten, die als logische Seiten markiert sind:

...
...

Werden mehrere logische Seiten verwendet, sollte man sie mit eindeutigen IDs versehen, um sowohl die Navigation als auch die Initialisierung zu ermöglichen. Die Bibliothek erlaubt die Navigation zu Seiten unabhängig davon, ob sie physische Seiten (separate HTML-Dateien) oder logische Abschnitte einer vorhandenen HTML-Datei sind.

Die Struktur einer mobilen Seite kann nicht allzu anspruchsvoll sein. Der Anzeigebereich ist begrenzt und man kann sich kaum ein mehrspaltiges Layout leisten. Folglich besteht eine jQuery-Mobile-Seite häufig aus einem Header, einem Footer und einem Inhaltsbereich in einem einspaltigen Layout. Allerdings ist dies lediglich eine Konvention: Die Seite darf beliebiges Markup enthalten.

Seiten initialisieren

Jeder jQuery-Entwickler ist mit dem ready-Ereignis vertraut. Das Ereignis wird für den Code ausgelöst, sobald das Seiten-DOM vollständig initialisiert ist und der Seitenautor die Initialisierung der Seitenelemente gefahrlos abschließen kann. In jQuery Mobile verwenden Sie aber nicht das ready-Ereignis, sondern das neue pageinit-Ereignis:

...

Das ready-Ereignis funktioniert nicht, weil jQuery Mobile auf Ajax zurückgreift, um stillschweigend angeforderte Seiten zu laden und Seitenübergänge einzurichten. Die Anzeige der Seite (egal, ob die einer realen Seite oder eines virtuellen Seitencontainers) folgt anderen Regeln als in klassischem jQuery. Wegen der Bindung an die eigentliche DOM-Initialisierung wird das ready-Ereignis nur beim ersten Mal ausgelöst, jedoch für keine weitere Anzeige der Seite.

Man muss nun lediglich ein

X
- Gib Deinen Standort ein -
- or -