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

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…
Mitmachen und gewinnen
Ratgeber: "Webdesign"

Gleiche Rechte für alle - genau das macht auf Websites nicht immer Sinn. Wir zeigen Ihnen, wie Sie mit Joomla Rechte differenziert vergeben können.
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…
image.jpg
Ratgeber: "Bildbearbeitung"

Der Cloud sei Dank entstehen im Netz immer mehr Werkzeuge, die komplexe Rechenprozesse in einfache Interfaces packen. Das gilt auch für die…
Online-Shop mit Opencart erstellen
Ratgeber: "Web-Business"

Neben Magento fristen verschiedene Shopsysteme ein Mauerblümchendasein. Doch zu Unrecht finden Lösungen wie Opencart wenig Beachtung. (Dr. Holger…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp
Video
Kinostart: 23.11.2017