13.082012

jQuery Mobile - Grundlagen

Möchte man eine eigene Website für mobile Entgeräte erstellen, gibt es nur drei wirkliche Varianten für einen Frontend Entwickler. Sencha Touch, jQTouch oder aber jQuery Mobile. Mit letzteren werden wir uns heute beschäftigen.

Voraussetzungen für jQuery Mobile

jQuery Mobile benötigt nur einen modernen Smartphone oder Tablet Browser, da es erst richtig zum glänzen kommt wenn HTML5 mit ins Spiel kommt. Eine weitere Voraussetzung ist aktives Javascript, da es, wie der Name es schon verrät, auf dem Javascript-Framework jQuery basiert.

Noch dazu wird ein einigermaßen aktuelles mobiles Betriebsystem vorausgesetzt.

Hier eine kleiner Ausschnitt:

  • Apple iOS 3.2-5.0
  • Android 2.1-2.3
  • Android 3.1 (Honeycomb)
  • Android 4.0 (ICS)
  • Windows Phone 7-7.5
Die komplette Liste mit allen unterstützen System und Browsern findet ihr hier.

Wie schon erwähnt macht sich jQuery Mobile die Vorteile von HTML5 zunutze und deshalb brauchen wir auch die HTML5-Doctype dazu müssen wir noch die beiden Frameworks sowie das Standard Stylesheet einbinden.

Das sollte dann ungefähr so aussehen:

<!DOCTYPE html>
<html>
<head>
  <title>Seitentitel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,
   initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/
   1.0b2/jquery.mobile- 1.0b2.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/
   jquery-1.6.2.min.js"> </script>
  <script type="text/javascript" src="http://code.jquery.com/
   mobile/1.0b2/jquery.mobile-1.0b2.min.js"> </script>
</head>
<body>
</body>
</html>

Ein erstes Beispiel

Wir haben also schon mal das Grundgerüst unserer neuen jQuery Mobile Seite. Um diese jetzt mit ein bisschen Inhalt zufüllen müssen wir eine Seite anlegen. Dafür muss ich erstmal die Grundstruktur einer jQuery Mobile Seite erklären. Diese gliedert sich in vier Bereiche. Einmal die Seite selbst, diese ist ein einfaches DIV Element mit einem neuen Attribut, nämlich dem data-role. Dieses Attribut wird einem bei der Arbeit mit jQuery Mobile noch sehr oft über den Weg laufen. data-role dient dazu jQuery Mobile zusagen welche Rolle das jeweilige Element hat. In unserem Fall die Rolle page. In unserer Page gibt es nun drei weitere Bereiche:

  • header für die Kopfzeile
  • content für den Inhalt
  • footer für die Fußzeile

Um alle drei Bereiche einmal zu testen sieht unsere Seite jetzt so aus:

<!DOCTYPE html>
<html>
<head>
  <title>Seitentitel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,
   initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/
   1.0b2/jquery.mobile- 1.0b2.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/
   jquery-1.6.2.min.js"> </script>
  <script type="text/javascript" src="http://code.jquery.com/
   mobile/1.0b2/jquery.mobile-1.0b2.min.js"> </script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Willkommen</h1>
    </div>
    <div data-role="content">
      <h2>Inhalt</h2>
      <p>Hallo ihr da draußen!</p>
    </div>
    <div data-role="footer">
      <h4>Auf Wiedersehen</h4>
    </div>
  </div>
</body>
</html>

Lern uns kennen!