jQuery Mobile – Der Seitenaufbau

Bevor man damit beginnt seine ersten mobile Websites zu bauen, gibt es einige grundlegende Punkte die Struktur betreffend zu wissen.
Zunächst einmal arbeiten wir unter dem HTML5 Doctype. Was in mobilen Endgeräten glücklicherweise kein Problem ist, da diese HTML5 in sogut wie allen Fällen verstehen.

Der HTML Head mit den für jQuery Mobile notwendigen JS-Skripten, sieht nun wie folgt aus:

^?View Code HTML

<!DOCTYPE html>
<html>
	<head>
	<title>Meine mobile Website</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

Für das Framework benötigen wir im HTML Teil nun ein spezielles Attribut mit der Bezeichnung “data-role”, das den allgemein Aufbau der Seite definiert.

^?View Code HTML

<div data-role="page">
<body>
 
<div data-role="page">
 
	<div data-role="header">
		<h1>Meine mobile Website</h1>
	</div>
 
	<div data-role="content">
		<p>Hier der normale Seiteninhalt..</p>
	</div>
 
	<div data-role="footer">
		<p>Allgemeine Seiteninfo</p>
	</div>
</div>
 
</body>
</html>
</div>

Der notwendigen Attributausprägungen sind hierbei page, header, content und footer. Jedes einzelne dieser Divs ist frei mit normalen HTML Tags befüllbar.

Damit haben wir nun schon unsere erste statische Seite. Obwohl wir ein Javascript Framework benutzen, brauche wir bisher dafür noch kein Javascript. Alle notwendigen Schritte laufen im Hintergrund ab.

Im nächsten Teil widmen wir uns dann der Verlinkung mittels Ajax und dem Wechsel zwischen verschiedenen Seiten..