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.
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...
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
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="https://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="https://code.jquery.com/jquery-1.6.4.min.js"></script><script src="config.js"></script><script src="https://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.
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 .
