jQuery Mobile - Tipps & Tricks für mobile Web-Apps
jQuery Mobile ist eines der beliebtesten Frameworks zur Erstellung mobiler Web-Apps und Websites. Wir haben nützliche Tipps und Tricks: z. B. wie Sie Texte sprachlich anpassen oder eigene Icons und Seitenübergänge definieren.
Das beliebte Tool für die Erstellung von mobilen Websites jQuery Mobile liegt nun in Version 1.1 vor. Seine Popularität liegt zum einen daran, dass es auf dem weit verbreiteten jQuery aufbaut, und zum anderen, dass sich die Erstellung von Websites damit so einfach gestaltet. Basis ist immer ein vo...
Das beliebte Tool für die Erstellung von mobilen Websites jQuery Mobile liegt nun in Version 1.1 vor. Seine Popularität liegt zum einen daran, dass es auf dem weit verbreiteten jQuery aufbaut, und zum anderen, dass sich die Erstellung von Websites damit so einfach gestaltet. Basis ist immer ein vorgegebenes Grundgerüst, das direkt mit Inhalten befüllt werden kann. Für den Einseiten-Dokumenttyp sieht das Grundgerüst folgendermaßen aus: Zuerst muss die meta-Angabe stehen, danach werden die benötigten Dateien eingebunden.
<meta name="viewport"
content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://
code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /><script src="https://code.jquery.com/
jquery-1.7.1.min.js"></script><script src="https://code.jquery.com/
mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>Innerhalb des body-Elements stehen Elemente mit vorgegebenen Werten für data-role:
<div data-role="page"><div data-role="header"></div><div data-role="content"></div><div data-role="footer"></div></div>Das Dokument wird damit auch schon automatisch gestaltet: Fuß- und Kopfzeile sind mit einem diskreten dunklen Farbverlauf versehen, der Inhaltsbereich ist heller. Die Standardoptik und die Inhalte können Sie jetzt an Ihre Bedürfnisse anpassen. Die ersten einfachen Anpassungen nehmen Sie über vorgegebene data-Attribute vor.
So passen Sie jQuery Mobile über data-Attribute an
Beginnen wir mit Konfigurationen beim page-Element. Soll automatisch ein Button eingeblendet werden, der den Besucher zur vorher aufgerufenen Seite zurückführt, so geben Sie dem page-Element ein data-add-back-btn="true". Den Text, der standardmäßig "Back" lautet, ändern Sie über data-back-btn-text="Ihre Beschriftung". Damit sieht ein modifiziertes page-Element folgendermaßen aus:
<div data-role="page" data-add-
back-btn="true" data-back-btn-text="Zurueck"> ...Bedenken Sie aber bei Tests, dass der Zurück-Button nur angezeigt wird, wenn es auch einen Eintrag im Browserverlauf gibt, das heißt vorher eine andere Seite aufgerufen wurde. Dient die aktuelle Seite als Dialog, so erscheint beim Dialogfeld automatisch ein Schließen-Button mit dem passenden Icon; als Tooltip wird "Close" eingeblendet. Diesen Text ändern Sie ebenfalls über das page-Element der Dialogseite, jedoch dieses Mal mit folgender Angabe:
<div data-role="page" data-close-btn-
text="Schliessen"> ...Wenn Sie die Funktion jetzt testen wollen, müssen Sie das Dokument mit dem auf diese Art modifizierten page-Element über einen Link aufrufen, bei dem Sie das zu öffnende Dokument mit data-rel="dialog" als Dialog kennzeichnen:
<a href="data_attribute.html" data-
rel="dialog"> Dialog aufrufen </a>Die hier gezeigten Anpassungen wurden beim page-Element durchgeführt, das immer eine gesamte Seite umfasst. Für den darin befindlichen header-Bereich existieren zusätzliche Anpassungsoptionen. So schreiben Sie für einen fixierten Header:
<div data-role="header" data-
position="fixed" >Ebenso können Sie das auch bei der Fußzeile angeben:
<div data-role="footer" data-
position="fixed" >Das war nur ein kleiner Ausschnitt aus den Anpassungsoptionen durch data-Attribute; eine Auflistung aller Optionen bietet die Dokumentation von jQuery. Praktisch an diesen Anpassungen ist, dass sie sich direkt im HTML-Code angeben lassen und Sie keinen Javascript- oder CSS-Code benötigen. Wenden wir uns jetzt einigen Modifikationen zu, die ein bisschen mehr Technik erfordern, und beginnen mit den Icons.
jQuery Mobile: Individuelle Buttons - so geht's
jQuery Mobile bringt bereits einen Satz Icons mit, aber Sie können natürlich auch eigene verwenden. Ihre Icons sollten eine Größe von 18 mal 18 Pixel haben und im PNG-Format mit transparentem Hintergrund abgespeichert sein. Wenn Sie eigene Icons für hochauflösende Displays wie das Retina-Display des iPad 3 bereitstellen wollen, benötigen Sie diese auch in der doppelten Größe, also 36 mal 36 Pixel. Jetzt müssen Sie sich noch einen geeigneten Namen für Ihr Icon ausdenken, im Beispiel soll es tshirt heißen. Es soll aktiviert werden, wenn man bei einem Button data-icon="tshirt" ergänzt:
<a href="#" data-role="button" data-
icon="tshirt">T-Shirt!</a>jQuery Mobile sucht in diesem Fall nach einer Klassendefinition, die den von Ihnen vorgegebenen Namen mit der Ergänzung .ui-icon am Anfang trägt, gesucht wird also nach einer Definition von .ui-icon-tshirt. Das ist der Selektor, den Sie neu schreiben und bei dem Sie einen Verweis auf Ihr Icon integrieren müssen:
.ui-icon-tshirt {
background-image: url("tshirt.png");
}Diese Angabe können Sie beispielsweise in einem eigenen Stylesheet unterbringen, das Sie nach dem offiziellen jQuery Mobile-Stylesheet einbinden. Wenn Sie jetzt bei einem Button data-icon="tshirt" ergänzen, wird das neue Icon verwendet. Haben Sie eigene Icons für hochauflösende Displays erstellt, müssen Sie noch definieren, wann diese verwendet werden - im Beispiel heißt das hochauflösende Icon mit der Größe 36*36px tshirt-highres.png und es muss sich natürlich am angegebenen Ort befinden.
@media only screen and (-webkit-min-
device-pixel-ratio: 1.5),
only screen and (min--moz-device-
pixel-ratio: 1.5),
only screen and (min-resolution:
240dpi) {
.ui-icon-tshirt {
background-image: url("tshirt-
highres.png");
background-size: 18px 18px;
}
}
Seitenübergänge
Bei einer mobilen App erwartet der Besucher animierte Seitenübergänge, von denen jQuery Mobile mehrere zur Verfügung stellt. Standardmäßig wird für Seiten fade und für Dialoge pop verwendet. Wenn Sie das ändern wollen, so geben Sie es hinter dem data-transition-Attribut an. Bei einem Aufruf eines Dialogs sieht es folgendermaßen aus:
<a href="dialog.html" data-
rel="dialog" data-transition="flip" >dialog</a>Und parallel dazu lassen sich auch die Übergangseffekte zwischen normalen Seiten spezifizieren:
<a href="seite.html" data-
transition="flip" >Seite</a>Zur Auswahl stehen neben dem klassischen fade und dem hier verwendeten flip, das die neue Seite mit einer Drehung hineinbringt, noch pop, turn, flow, slidefade, slideup, slidedown oder none. Sollten diese nicht reichen, lassen sich eigene Übergänge definieren. Für diese Übergänge können Sie auf die vorgegebenen CSS3 Animations in jQuery zurückgreifen.
Ratgeber: CSS3 - Quick Reference Guide
Diese Animations finden Sie am schnellsten, wenn Sie die CSS-Datei von jQuery Mobile (zum Lesen unbedingt die nicht komprimierte Variante nehmen!) nach dem Schlüsselwort keyframes durchsuchen.
Links zum Thema
Links zum Thema
Auflistung sämtlicher data-Attribute Die CSS-Datei von jQuery Mobile in lesbarer Form Globale Konfigurationseinstellungen jQuery Mobile ThemeRollerIm einfachsten Fall erstellen Sie den neuen Übergang rein über die Definition der entsprechenden Klassen. Im folgenden Beispiel soll ein Übergang definiert werden, der ein Einblenden (fade) mit einem Schieben von oben kombiniert und gleiten genannt wird. Wichtig ist dabei der doppelte Klassenname .gleiten.in und .gleiten.out; es muss also der selbst gewählte Name mit den zusätzlichen Endungen .in und .out sein. .in und .out sind zwei vorgegebene Klassen, die in jQuery Mobile intern benutzt werden.
.gleiten.in {
-webkit-transform: translateY(0);
-webkit-animation-name: fadein;
-moz-transform: translateY(0);
-moz-animation-name: fadein;
-webkit-animation-duration: 400ms;
-moz-animation-duration: 400ms;
}
.gleiten.out {
-webkit-transform: translateY(-100%);
-webkit-animation-name: slideoutto
top;
-moz-transform: translateY(-100%);
-moz-animation-name: slideouttotop;
-webkit-animation-duration: 400ms;
-moz-animation-duration: 400ms;
}Im Beispiel wird auf die von jQuery Mobile bereits definierten Animationen fadein und slideouttotop zurückgegriffen. Deren Definition - der Kürze halber hier nur in der Mozilla-Variante - sieht folgendermaßen aus:
@-moz-keyframes slideouttotop {
from { -moz-transform: translateY(0);
}
to { -moz-transform: transla
teY(-100%); }
}Sie sehen, hierdurch wird definiert, dass das Element von seiner ursprünglichen Position auf -100% auf der Y-Achse verschoben wird - das bedeutet, aus dem sichtbaren Bereich heraus. Die oben verwendete fadein-Animation verändert hingegen nur die Transparenz:
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}Statt hier auf die vorgegebenen Animationen zurückzugreifen, können Sie nach dem vorgestellten Schema natürlich auch Ihre eigenen definieren. Ist der Seitenübergang definiert - das heißt die Klasse erstellt -, so können Sie sie zuweisen, indem Sie sie genau wie die von jQuery Mobile vorgegebenen Seitenübergänge hinter data-transition schreiben. Im Beispiel sieht das folgendermaßen aus:
<a href="#zwei" data-transition=
"gleiten">Zur zweiten Seite</a>Zwei Dinge seien noch zu den Seitenübergängen angemerkt: Zuerst einmal sind diese in der hier besprochenen Version jQuery Mobile 1.1. nur für Firefox und Webkit-Browser konzipiert; sicherlich wird man in absehbarer Zeit auch IE und Opera berücksichtigen müssen. Außerdem gibt es in der jQuery-Mobile-Dokumentation den Hinweis, dass auf manchen Systemen die Übergänge nicht so rund ablaufen, wie das zu wünschen wäre. Abhilfe kann die folgende zusätzliche Angabe schaffen:
.ui-page { -webkit-backface-visibili
ty: hidden; }
jQuery Mobile: So funktionieren globale Konfigurationen
Wie oben beschrieben können Sie einzelne Einstellungen über data-Attribute vornehmen. In manchen Fällen ist es jedoch besser, Konfigurationen global festzulegen. Das hat zwei Vorteile: zum einen gelten globale Konfigurationen eben projektübergreifend und Sie ersparen sich viele Einzeldefinitionen; Zum andern lassen sich bei der globalen Konfiguration auch Parameter festlegen, die Sie über die Einzelkonfiguration nicht steuern können.
Ratgeber: Tipps & Tricks für HTML, CSS, JavaScript und PHP
Für globale Konfigurationen sollten Sie auf das Event mobileinit zurückgreifen. Der folgende Code definiert global als Übergang für alle Seiten den flip-Effekt.
$(document).bind("mobileinit", func
tion(){
$.mobile.defaultPageTransition =
'flip';
});Diesen Code schreiben Sie am besten in eine eigene Datei, die Sie einbinden müssen, bevor die eigentliche jQuery-Mobile-Datei eingebunden wird. Im Beispiel heißt die neue Datei konfiguration.js.
<script src="https://code.jquery.com/
jquery-1.7.1.min.js"></script><script src="konfiguration.js"></
script><script src="https://code.jquery.com/
mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>Damit sind jetzt die Seitenübergänge global angepasst. Neben der eben vorgestellten Schreibung in konfiguration.js können Sie die Optionen übrigens auch folgendermaßen angeben:
$(document).bind("mobileinit",
function(){
$.extend( $.mobile , {
defaultPageTransition: 'flip'
});
});Weitere Optionen ergänzen Sie nach einem Komma; so werden bei folgendem Code zusätzlich der Standardübergang für Dialoge angepasst und zwei Texte verändert: pageLoadErrorMessage bestimmt die Fehlermeldung, wenn eine Seite nicht geladen werden kann, und loadingMessage ist die Meldung während des Ladens:
$(document).bind("mobileinit",
function(){
$.extend( $.mobile , {
defaultPageTransition: 'flip',
defaultDialogTransition: 'fade',
loadingMessage: 'wird geladen',
pageLoadErrorMessage: 'Seite kann
nicht geladen werden'
});
});Für eine vollständige Auflistung der möglichen Optionen sei hier wieder auf die Dokumentation verwiesen.
jQuery Mobile: Swatch - eigene Gewänder
jQuery Mobile bringt von Haus aus mehrere sogenannte Swatches mit, die Bereiche, Schaltflächen und Bedienelemente auf vorgegebene Art einfärben. Sie tragen die Buchstaben a bis e. Um ein Swatch zuzuweisen, ergänzen Sie das Attribut data-theme im Element. Wollen Sie ein anderes Swatch global aktivieren, empfiehlt es sich, dies erst einmal für das Element mit data-role="page" festzulegen.
<div data-role="page" data-
theme="e" >Wenn Sie hingegen date-theme beim content-Bereich angeben, so kann es passieren, dass die Hintergrundfarbe nicht die gesamte Seite ausfüllt. Allerdings sind nach der Angabe des Swatches beim page-Element Kopf- und Fußbereich trotzdem noch im Standard-Swatch belassen. Wenn Sie Kopf- und Fußbereich ebenfalls im Swatch-Stil angepasst haben wollen, so müssen Sie das für diese separat festlegen:
<div data-role="page" data-
theme="e"><div data-role="header" data-
theme="e"></div><div data-role="footer" data-
theme="e"></div>Aber manchmal muss es auch etwas anderes sein als die Standard-Swatches. Um diese zu ändern, können Sie natürlich direkt an den CSS-Definitionen Hand anlegen. Schneller und komfortabler geht es mit dem ThemeRoller. Besonders praktisch finden wir die Möglichkeit, vorhandene Swatches zu importieren und zu modifizieren. So lassen sich gut auf der Basis der Optik von jQuery Mobile angepasste Swatches erstellen. Hierfür klicken Sie im ThemeRoller auf "Import". Übrigens wäre das auch eine Möglichkeit, ein für eine Vorversion erstelltes Theme anzupassen: Nach dem Import können Sie die aktualisierte Version herunterladen.
Im ThemeRoller können Sie für jedes Swatch individuell die Farben (Text- und Hintergrundfarbe) anpassen, Schatten und Rahmen festlegen sowie Links und Buttons konfigurieren. Swatch-übergreifend lassen sich der Grad der Rundung (border-radius), die Schriftart und der aktive Zustand (beim Anklicken) definieren. Ein Klick auf den Download-Button erstellt Ihnen Ihr Theme. Dann können Sie es in Ihrer Datei referenzieren:
<link rel="stylesheet"
href="meintheme.min.css" /><link rel="stylesheet" href="https://
code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />Sie sehen, zuerst kommt Ihr Theme, danach nicht mehr die übliche CSS-Datei von jQuery Mobile, sondern eine abgespeckte, die nur eine globale und nicht theme-bezogene Formatierungen beinhaltet.
Selbst Hand anlegen
Aber auch die über den ThemeRoller vordefinierten Möglichkeiten genügen nicht immer. Was beispielsweise, wenn Sie eine individuellere Liste mit kleinen Bildchen erstellen wollen? Oder noch simpler: wenn Sie einmal einen Titel haben, der länger ist als von jQuery Mobile konzipiert? Dann müssen Sie selbst Hand anlegen. Im folgenden Beispiel ist das Titelelement etwas länger geraten:
<div data-role="header"><h1>Erste Seite mit langem Titel</h1></div>In diesem Fall wird der Titeltext standardmäßig von jQuery Mobile bei kleinerem Bildschirm abgeschnitten, obwohl eigentlich noch Platz rechts und links zur Verfügung stünde. Um herauszufinden, was die Ursache für diese Formatierung ist, greifen Sie zum Webentwicklungstool Ihrer Wahl, im Firefox beispielsweise zu Firebug. Dort sehen Sie, wenn Sie auf das Element klicken, dass ein Außenabstand (margin) nach rechts und links von 30 Prozent definiert ist. Ihre Formatierungsänderungen notieren Sie am besten in einer separaten CSS-Datei, die nach der offiziellen jQuery-Mobile-CSS-Datei eingebunden wird. Dort schreiben Sie:
.ui-header .ui-title {
margin-left: 0;
margin-right: 0;
}Woher aber kommen die Klassen .ui-headerv und .ui-title? Sie sind im ursprünglichen HTML-Dokument nicht vorhanden; aber dieses ursprüngliche Dokument wird von jQuery Mobile bearbeitet und in dem Dokument, das das Ergebnis dieser Bearbeitungen ist, sind die Klassen eingefügt. Deswegen hilft es wenig, den eigentlichen HTML-Code zu studieren, sondern Sie müssen den von jQuery Mobile erzeugten Code heranziehen, wie er Ihnen beispielsweise von Firebug gezeigt wird. So lassen sich natürlich beliebige andere Formatierungen modifizieren - Ihre Anpassungen sollten Sie immer gut dokumentieren, damit Sie bei einem Update von jQuery Mobile im Zweifelsfall auch schnell finden, was angepasst werden muss.
Bald wird es übrigens noch mehr Möglichkeiten der Anpassung geben: Online finden Sie schon ein Custom Download-tool, in dem Sie die von Ihnen benötigten Komponenten von jQuery Mobile zusammenstellen können. Derzeit befindet es sich noch im Alphazustand.
