Design für Smartphones

Seitengestaltung und Event-Steuerung mit jQuery Mobile

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie mit jQuery Mobile Ihre Seite gestalten und Events konfigurieren können.

Mobile Webseiten mit jQuery Mobile

© Hersteller/ Archiv

Mobile Webseiten mit jQuery Mobile

Tipp 1: Standard-Themes von jQuery Mobile

jQuery Mobile bietet schöne Möglichkeiten für die Gestaltung. Neben dem voreingestellten Standard-Theme gibt es fünf weitere, die mit den Buchstaben a bis e gekennzeichnet werden. In der jQuery-Mobile-Dokumentation heißen diese Themes Swatches (Muster).

  • Der Standardswatch bietet den größten Kontrast: der Kopfbereich ist schwarz, der Inhalt weiß, die Schrift schwarz.
  • a: Kopfbereich schwarz, Inhalt dunkelgrau mit heller/weißer Schrift
  • b: Kopfbereich blau, Inhalt hellgrau
  • c: Kopfbereich hellgrau, Inhalt hell
  • d: Kopfbereich mittelgrau, Inhalt hell
  • e: Kopfbereich orange, Inhalt hellorange

Wenn Sie einen anderen Swatch aktivieren möchten, solllten Sie dies zuerst beim Element mit data-role="page" machen.

<div data-role="page" data-theme="e">

Sollen nur einzelne Buttons oder sonstige Elemente anders gestaltet werden, verwenden Sie auch das Attribut data-theme:

<p class="ui-bar"><a href="#" data-icon="star" data-theme="b">Bewertung</a></p>

Genauso können Sie auch Listen stylen. Außerdem ist es möglich, die Listentrenner mit data-divider-theme gesondert zu formatieren:

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="filtern ..." data-theme="d" data-divider-theme="e">

Tipp 2: Eigene Swatches anlegen

jQuery Mobile Theme Roller

© Hersteller/ Archiv

Mit dem Theme Roller erstellen Sie Ihre individuellen Layouts.

Individuellere Layouts ermöglicht der Theme Roller, mit dem Sie eigene Swatches anlegen können. Die Grundfarben lassen sich sehr intuitiv zuweisen: Ziehen Sie einfach eine Farbe aus dem Farbwähler direkt auf ein Element in der Vorschau; dadurch wird automatisch allen gleichartigen Elementen diese Farbe zugewiesen. Das Finetuning erledigen Sie über den Konfigurationsbereich links: Hier legen Sie Eigenschaften wie Schriftart, Textschatten, Farbverläufe oder Abrundungen der Buttons fest. Wenn alles aussieht wie gewünscht, laden Sie Ihr Theme durch den Button Download Theme links oben herunter.

Sie erhalten das Theme in zwei Varianten: Die minimierte ist für den produktiven Einsatz gedacht, die andere für den Fall, dass Sie den CSS-Code weiter bearbeiten möchten. Danach können Sie - vorausgesetzt, das Theme ist am richtigen Ort abgespeichert - das Stylesheet im Kopfbereich Ihres Dokuments einbinden. Wichtig ist dabei, dass Ihre CSS-Datei nach dem allgemeinen jQuery-Mobile-Stylesheet steht, damit Ihre Formatierungen greifen.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /><link rel="stylesheet" href="themes/fm.css" />

Außerdem sollten Sie Ihre erstellten Swatches aktivieren, indem Sie diese beim umfassenden Element angeben:

<div data-role="page" data-theme="a">

Tipp 3: Event-Konfigurationen anpassen

jQuery Mobile bringt eigene Events mit. Grundlegende Dinge nehmen Sie am besten beim Event mobileinit vor. Hier können Sie beispielsweise die Fehlermeldung anpassen, die erscheint, wenn eine Seite nicht geladen werden kann.

$(document).bind("mobileinit", function(){
$.mobile.pageLoadErrorMessage ='Seite kann nicht geladen werden';
});

Dabei ist die Skriptreihenfolge wichtig. Wenn Sie Einstellungen von jQuery Mobile überschreiben wollen, müssen Sie dies machen, bevor jQuery Mobile eingebunden wird. Nehmen wir an, die drei Zeilen Code zur Änderung der Fehlermeldung beim Laden stehen in einer Datei config.js. Dann müssen Sie diese folgendermaßen im Kopfbereich einbinden:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script src="config.js"></script><script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Denken Sie aber beim Ausprobieren daran, dass solche Dinge wie Fehlermeldungen oder Ajax-Laden nur funktionieren, wenn Sie das Dokument über einen Server aufrufen.

Tipp 4: Event-Steuerung mit jQuery Mobile

Bei jQuery machen Sie schnell Bekanntschaft mit $(function() { /*Hier Code */ }); - darin wird der Code eingebunden, der nach dem Laden des DOMs ausgeführt wird. Dies sollten Sie bei jQuery Mobile nicht verwenden, da hier das Seitenkonzept aufgehoben ist. Benutzen Sie stattdessen pageinit: Dieses Event wird ausgelöst, wenn eine bestimmte Seite initialisiert wird. Nehmen wir an, Sie haben Ihrer Seite die id="page1" gegeben, dann können Sie folgendermaßen Aktionen auslösen:

$("#page1").live("pageinit", function(event) {
alert("hallo");
$.mobile.changePage("dialog.html");
});

Im Beispiel wird zur Demonstration zuerst eine Meldung ausgegeben und dann die Seite dialog.html aufgerufen.

Praktisch sind auch die von jQuery Mobile bereitgestellten virtuellen Events, mit denen Sie sowohl Touch- als auch Klickereignisse abfangen. jQuery Mobile überzeugt dadurch, dass sich die Anwendungen so schnell erstellen lassen, ohne dass man eine Zeile Javascript Code schreiben muss - und dabei ist alles enthalten, was man für gängige mobile Seiten braucht. Aufwändiger wird es natürlich, wenn Sie an bestimmten Stellen von den im Allgemeinen sehr sinnvollen Vorgaben des Frameworks abweichen möchten.

Mehr zum Thema

Tipps zum Grundgerüst von jQuery Mobile und den verfügbaren Seitentypen erfahren Sie in unserem Ratgeber: Mobile Webseiten erstellen mit jQuery Mobile .

Wie Sie ihre mobile Webseite übersichtlich gestalten können erfahren Sie in unserem Ratgeber: Listen, Buttons und Co. mit jQuery Mobile .

Mehr zum Thema

Safari Extensions AddOns Erweiterungen PlugIns Zusatzprogramme
Erweiterungen für Apple Safari

Endlich kann Apples Safari durch den Download von Erweiterungen angepasst werden. magnus.de zeigt die besten AddOns.
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen eine mobile Webseite oder App erstellen? jQuery Mobile bietet Funktionen und Optik, die für die mobile Nutzung unverzichtbar sind. Zudem…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine…
MIt GPSBabel GPS-Dateien konvertieren
Navi-Hilfsprogramm

Mit GPSBabel können GPS-Routen, -Tracks und -Punkte in unterschiedliche Formate konvertiert werden. Die Dateien können dann zwischen GPS-Empfängern…
Whatsapp Alternativen
Für Android, iPhone, iPad & Co.

Es gibt keine Whatsapp-Alternative? Quatsch! Diese 10 Messenger-Apps für Android, iOS und Windows Phone sind der perfekte Ersatz.