jQuery Mobile
Seitdem mobile Endgeräte (Smartphones, Tablett-PC) eine immer größere Verbreitung gefunden haben, ergeben sich für die Gestalter von Webseiten neue Herausforderungen. Der von vielen professionellen Anbietern (damit meine ich in erster Linie solche, die über ausreichende finanzielle Ressourcen verfügen) beschrittene Weg läuft in den meisten Fällen darauf hinaus, für die unterschiedlichen Plattformen entsprechende Apps zu generieren.
Es geht aber auch anders. Bei meinen Recherchen zum Thema mobile Version einer Website bin ich auf das jQuery-Plugin jQuery Mobile gestoßen. Dieses Plugin stellt auf der Basis von HTML5-Code eine einheitliche Benutzeroberfläche für alle gängigen mobilen Plattformen (Smartphones, Tablett-PC) bereit.
Grundaufbau einer jQuery-Mobile Website
Wie ich bereits erwähnt habe, verwendet jQuery-Mobile HTML5-Strukturen. Dementsprechend ist auch der DOCTYPE zu vergeben. Im <head></head>-Bereich werden jQuery selbst sowie die zu jQuery Mobile gehörigen Dateien (JavaScript, CSS) eingebunden. Mit der Zeile
<meta name="viewport" content="width=device-width, initial-scale=1">
wird der Browser aufgefordert, die Breite der Seite in die Bildschirmbreite einzupassen und die anfängliche Zoomstufe auf 1 einzustellen. Die wichtigsten Struktureinheiten sind div-Elemente. Das alles umschließende Element ist <div data-role="page" data-theme="b"></div><!-- Ende page -->. Die Verwendung von data-irgendwas entspricht einer Empfehlung der HTML5-Normgeber. data-role="page" beinhaltet die Botschaft für jQuery-Mobile: Achtung, dass ist der Seiteninhalt.
Im Folgenden werden dann, ebenfalls mit jeweils mit data-role die Bereiche Kopf, Inhalt und Fuss definiert. Mit data-position="fixed" wird dem Kopfbereich und dem Fussbereich eine feste Position (ganz oben und ganz unten) zugewiesen. Hier noch einmal der vollständige Quellcode:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Demo 01</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/jqm-1.2.0/jquery.mobile-1.2.0.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/jqm-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
<h1>Mein Webseitentitel</h1>
</div><!-- Ende header -->
<div data-role="content">
<p>Hallo, ich bin der Inhalt</p>
</div><!-- Ende content -->
<div data-role="footer" data-position="fixed">
<p>Der Fussbereich der Site</p>
</div><!-- Ende footer -->
</div><!-- Ende page -->
</body>
</html>
Dieses kleine Beispiel sieht so aus Hello World Demo.
Navigation einfügen
Was ist eine Webseite ohne Navigation? Es gibt zwar auf der kleinen Demo-Seite noch gar keine Navigationsziele, aber ein wenig Komfort würde ja dadurch bereitgestellt, dass ich dem Betrachter der kleinen Demoseite die Möglichkeit gebe, zu dieser Seite und zu Homepage der Website zu navigieren. Die Navigation soll, wie bei vielen mobilen Websites, ganz unten, also im Fussbereich angesiedelt werden. Dazu wird data-role="footer" so erweitert:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="/" data-icon="home" target="_blank">Home</a></li>
<li><a href="/themen/jquery-mobile" data-icon="gear" target="_blank">jQuery-Mobile</a></li>
</ul>
</div><!-- Ende navbar -->
</div><!-- Ende footer -->
Entscheidend ist hier data-role="navbar". Die Links werden dann, wie üblich, in eine ul-Liste geschrieben. Optional kann jeder Link noch ein Attribut data-icon bekommen. Mit einem vordefinierten Wert wird auf die in jQuery Mobile enthaltenen Icons zugegriffen.
Das kleine Beispiel sieht so aus Kleines jQuery-Mobile Demo mit Navigation.
Weiter geht es mit dem Aufbau der Seitenstruktur.