Mobile Webseiten erstellen mit jQuery Mobile
Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem unterstützt das Programm zahlreiche Systeme und Browser. Wir zeigen Ihnen das Grundgerüst und die wichtigsten Seitentypen in jQuery Mobile.
Hier erfahren Sie... ... welche Vorteile jQuery Mobile bietet ... wie jQuery Mobile aufgebaut ist ... welche Seitentypen es gibt ...
Hier erfahren Sie...
- ... welche Vorteile jQuery Mobile bietet
- ... wie jQuery Mobile aufgebaut ist
- ... welche Seitentypen es gibt
Das Javascript-Framework jQuery Mobile setzt auf jQuery auf und ist speziell für mobile Websites oder Web-Apps gedacht. Es beinhaltet zahlreiche Voraussetzungen, die für die mobile Nutzung auf Smartphones heute unumgänglich sind, unter anderem:
- Seiten werden per Ajax geladen und mit Übergangseffekt versehen. Dadurch müssen weniger Daten übertragen werden; zudem sind Übergangseffekte essenziell für ein "App-Feeling".
- Um bei kleineren Bildschirmen Inhalte übersichtlich zu präsentieren, ist es günstig, sie teilweise auszublenden und auf Aufforderung einzublenden. jQuery Mobile verfügt über eine integrierte Akkordeonfunktion und eine direkt nutzbare Filterfunktion für Listen.
- Eine wichtige Komponente von jQuery Mobile ist das CSS-Framework, das sich um das richtige Aussehen kümmert. Kopf- und Fußbereich sind wie bei Apps üblich gestaltet, Buttons und Listen haben leichte Farbverläufe und Schatten. In der Standardvariante gibt es ein Set von Mustern, aus dem man für die eigene Seite auswählen kann; weitere lassen sich über den Theme-Roller definieren.
Beeindruckend ist die Liste der unterstützten Systeme und Browser: Sie reicht von Android-Handys und iPhones über Windows Phone bis Blackberry und Opera Mini. Es gibt einen abgestuften Support - in manchen Systemen erhält man die verbesserte Variante, andere bekommen eine funktionierende Basisversion.
Einer der wichtigsten Punkte ist, dass jQuery Mobile streng dem Prinzip des Progressive Enhancement folgt - und in diesem Punkt unterscheidet es sich beispielsweise vom Javascript-Framework Sencha Touch. Die minimale Grundversion ist eine funktionierende HTML-Datei. In fähigeren Geräten wird diese per CSS und Javascript aufgepeppt - aber es funktioniert auch ohne. Ein weiterer Vorteil von jQuery Mobile ist, dass es auf dem beliebten jQuery Framework aufsetzt, das vielen Entwicklern bereits vertraut ist.
jQuery - Grundgerüst
Unten sehen Sie das Grundgerüst für alle jQuery-Mobile-Seiten - im Beispiel wird die Version 1.0.1 des Frameworks benutzt - sobald die bereits angekündigte Version 1.1 erschienen ist, sollten Sie diese verwenden:
<!DOCTYPE html><html><head><title>Seitentitel</title><meta name="viewport" content="width=
device-width, initial-scale=1" /><link rel="stylesheet" href="https://
code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /><script src="https://code.jquery.com/
jquery-1.6.4.min.js"></script><script src="https://code.jquery.com/
mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script></head><body>
Inhalte</body></html>Das Dokument verwendet den HTML5-Doctype. Wichtig ist die Viewport-Metaangabe, die dafür sorgt, dass Smartphones das Verkleinern der Seite unterlassen:
<meta name="viewport" content="width=
device-width, initial-scale=1" />Im head-Bereich werden mehrere Dateien eingebunden:
- Die Stylesheet-Datei ist eine wichtige Komponente und sorgt für die ganzen optischen Verbesserungen.
- Da jQuery Mobile auf jQuery basiert, muss diese Bibliothek ebenfalls referenziert werden.
- Schließlich gibt es eine spezielle jQuery-Mobile-Javascript-Datei, die danach eingebunden wird.
Seitentyp 1: Einzelseitentyp
Im Inhaltsbereich können Sie zwischen dem Einzelseitentyp oder dem Mehrseitentyp wählen. Beim Einzelseitentyp haben Sie für Ihr Projekt mehrere einzelne Dateien, die miteinander verlinkt sind. Innerhalb von body ergibt sich folgender Aufbau:
<div data-role="page"><div data-role="header"><h1>Seitentitel</h1></div><!-- /header --><div data-role="content"><p>Eigentlicher Inhalt</p></div><!-- /content --><div data-role="footer" data-position="fixed"><h4>Fussbereich</h4></div><!-- /footer --></div><!-- /page -->Sie sehen hier mehrere div-Elemente mit data-role-Attributen, die vorgegebene Werte enthalten. HTML5 erlaubt es Website-Erstellern, eigene Attribute zu definieren, die mit dem data-Vorsatz gekennzeichnet werden müssen. jQuery Mobile macht intensiv davon Gebrauch.
Im Beispiel gibt es einen Bereich mit data-role="page", der obligatorisch ist. Die anderen Elemente wie header, content und footer sind typisch, aber nicht vorgeschrieben. Zusätzlich wurde im Fußbereich data-position="fixed" ergänzt, was die Fußzeile immer unten anordnet.
Wenn Sie das Beispiel ausprobieren, dann ist jQuery Mobile schon im Hintergrund tätig geworden: Fuß- und Kopfbereiche sind besonders formatiert. Einen ersten Einblick, was genau geschehen ist, erhalten Sie, wenn Sie sich im Browser den generierten Quellcode anzeigen lassen. Das geht etwa über Firebug oder in der HTML-Ansicht von Chromes Entwicklerwerkzeugen.
Unter anderem sind Klassen für die Formatierungen hinzugefügt und Tabindizes definiert, um eine einfachere Bedienbarkeit mit Tastenkürzeln sicherzustellen. Außerdem sind WAI-Aria-Attribute ergänzt, die eine Auszeichnung für Screenreader und ähnliche Geräte bieten. Am Ende ist ein weiterer div-Container integriert, der eine Meldung für den Ladevorgang anzeigt, die Sie allerdings bei lokalen Tests nicht sehen.
Seitentyp 2: Mehrseitentyp
In jQuery Mobile gibt es zwei weitere Seitentypen, die von dem oben vorgestellten Grundschema abweichen: Beim Mehrseitentyp stehen alle Inhalte innerhalb einer einzigen Datei; der Benutzer bekommt jedoch jeweils nur einen einzelnen Seitenteil zu sehen. Das heißt, rein äußerlich ist das Ergebnis dasselbe wie beim Einzelseitentyp, aber im Hintergrund sind diese beiden Typen unterschiedlich aufgebaut: Beim Mehrseitentyp gibt es mehrere Elemente mit data-role="page", die eindeutige IDs erhalten sollten.
<div data-role="page" id="seite1">
...</div><div data-role="page" id="seite2">
...</div>Der Mehrseitentyp hat den Vorteil, dass alle benötigten Komponenten beim ersten Laden geladen sind. Der Nachteil ist, dass der Ladevorgang - gerade bei größeren Dokumenten - länger dauert.
Seitentyp 3: Dialog
Ein weiterer Seitentyp weicht von dem vorgestellten Schema ab: der Dialog. Für Dialogfenster erstellen Sie eine eigene Datei, bei der Sie anstelle von data-role="page" die Angabe data-role="dialog" machen. Wenn Sie dann in einem Dokument auf ein solches Dialogdokument verweisen, wird dieses gleich richtig gestylt wie ein modaler Dialog mit abgedunkeltem Hintergrund. Der Schließen-Button ist ebenfalls schon integriert und führt den Benutzer zur vorher besuchten Seite.
Der mit Übergangseffekten versehene Seitenwechsel funktioniert nicht nur bei normalen internen Seiten, sondern auch bei Dialogen, wenn die Ajax-unterstützte Navigation aktiviert ist, die sich bei Bedarf über data-ajax="false" deaktivieren lässt. Bei externen Seiten ergänzen Sie hierfür rel="external" beim Link; target bei einem Link bewirkt ebenfalls, dass das Laden per Ajax unterbunden wird.
Wie Sie ihre mobile Webseite übersichtlich gestalten können erfahren Sie in unserem Ratgeber: Listen, Buttons und Co. mit jQuery Mobile.
Wie Sie mit jQuery Mobile Themes anlegen und Events konfigurieren können erfahren Sie in unserem Ratgeber: Seitengestaltung und Event-Steuerung mit jQuery Mobile .
