Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 11): jQuery mobile (3)

Web-Apps erstellen (Teil 11): jQuery mobile (3)

Bei der Gestaltung von Web-Apps, die auf jQM basieren, kommt mit den Themes ein entscheidender Faktor ins Spiel. Denn über diese Themes lassen sich die Apps im Handumdrehen anpassen. Wie man Themes am besten nutzt, erfahrt ihr im ersten Teil dieses Video-Trainings. Anschließend geht es mit der Definition von Seitenübergängen weiter. Auch das ist ein wichtiges Stilmittel von Apps. Schließlich könnt ihr so mit wenig Aufwand Schwung in die App bringen.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Natürlich sollte eine Web-App immer möglichst individuell gestaltet sein. Für das grundlegende Aussehen sind in jQM allerdings Themes verantwortlich. Unter einem solchen Theme versteht man einen Satz an vordefinierten CSS-Eigenschaften, Grafiken usw. Das in jQM verwendete Theming-Prinzip orientiert sich weitestgehend am ThemeRoller-System, das in jQuery UI eingesetzt wird. Mehr zu diesem ThemeRoller dann im Anschluss.

Themes können dabei für ganze Seiten oder auch nur für einzelne Elemente genutzt werden. Hier ein kurzer Blick auf einige Elemente, die man üblicherweise mittels Themes gestaltet:

• Toolbars
• Inhalte
• Schaltflächen
• Listen
• Formularelemente

jQM stellt ein Standard-Theme zur Verfügung, in dem fünf sogenannte Swatches enthalten sind, die mit den Buchstaben a, b, c, d und e abgekürzt sind. Dabei lassen sich die Swatches übrigens untereinander kombinieren. So könnte man beispielsweise das Swatch b standardmäßig einsetzen, für einzelne Listen dann aber auf andere Swatches setzen. Auch das ist also möglich.

 
Einen ersten Eindruck von den Themes könnt ihr euch auf der Seite http://jquerymobile.com/demos/1.2.1/docs/pages/pages-themes.html verschaffen.

Bilder



Swatch a ist also eher dunkel, während Swatch e in Gelb daherkommt.

Um ein Theme anzuwenden, gibt es verschiedene Möglichkeiten. Zunächst einmal lässt sich das Theme der gesamten Seite zuweisen. Dazu wird dem div-Element mit der Attribut-Wert-Kombination data-role="page" das Attribut data-theme zugewiesen. Dieses data-theme erwartet als Wert dann das gewünschte Swatch, also einen Buchstaben zwischen a und e.
<div id="top" data-role="page" data-theme="a">

 
Ein Blick auf das Ergebnis zeigt schon mal, wie stark sich die Web-App dadurch verändert.

Bilder



 
Dadurch passen sich also automatisch alle auf der Seite verwendeten Elemente an. Das gilt dann beispielsweise auch für die Navigationsleiste im unteren Seitenbereich.

Bilder



 
Nun könnte es ja durchaus sein, dass euch Swatch a prinzipiell gefällt, die untere Navigationsleiste euch in diesem Swatch aber zu dunkel daherkommt. Wie wäre es denn mit gelben Schaltflächen? Kein Problem, dazu wird dem Fußbereich einfach das Swatch e zugewiesen.
<div id="top" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
  <h1>Willkommen bei PSD-Tutorials.de</h1>

</div>
<div data-tole="content">
  <ul>
    <li>Tutorials</li>
    <li><a href="">2D</a></li>
    <li><a href="">3D</a></li>
    <li><a href="">Web</a></li>
    <li><a href="">Mediengestaltung</a></li>
    <li>Video-Trainings</li>
    <li><a href="">2D</a></li>
    <li><a href="">3D</a></li>
    <li><a href="">Web</a></li>
  </ul>
</div>
<div data-role="footer" data-theme="e">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#" data-icon="info">Über uns</a></li>
<li><a href="# " data-icon="grid">Kontakt</a></li>
<li><a href="#" data-icon="star">Anfahrt</a></li>
<li><a href="#" data-icon="gear">Impressum</a></li>
</li>
</div>
</div>
</div>

 
Und auch jetzt darf ein Blick auf das Ergebnis nicht fehlen.

Bilder



Dieses Beispiel zeigt also, dass ihr tatsächlich Swatches auch auf einzelne Elemente anwenden könnt. Das betrifft dann eben nicht nur Seiten und Fußbereich, sondern auch Listen und Schaltflächen.
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Startseite</a>

Herzstück bildet jedes Mal das data-theme-Attribut.


 

Der ThemeRoller in Aktion

Die Themes sind eine feine Sache, keine Frage. Gerade die Themes sind es nämlich, die jQM aus gestalterischer Sicht so interessant machen, schließlich muss man sich - zumindest dann, wenn man sich mit dem Standard-Layout zufriedengibt - keine eigenen CSS-Definitionen anlegen. Nun muss man aber natürlich nicht unbedingt zu den Standard-Themes greifen. Eine Möglichkeit wäre, eigene Themes per Hand und CSS zu definieren. Darum soll es an dieser Stelle allerdings explizit nicht gehen. Vielmehr stellt jQM selbst eine Möglichkeit zur individuellen Gestaltung eines Themes zur Verfügung.

Das Ganze nennt sich ThemeRoller und ist unter http://jquerymobile.com/themeroller/index.php zu finden.

Bilder



Was passiert hier? Ihr könnt sämtliche Elemente der angebotenen Standard-Themes aufrufen und anpassen. Die Funktionsweise sollte weitestgehend selbsterklärend sein. Sobald ihr mit dem Ergebnis zufrieden seid, könnt ihr das Theme herunterladen und dann wie gehabt in eure Webseite einbinden.

 
Keine Idee, was möglich ist bzw. wie ihr euer Theme anpassen könntet? Kein Problem, lasst euch doch einfach inspirieren. Eine gute Inspirationsquelle findet ihr unter http://www.jqmgallery.com/.

Bilder



Hier sind zahlreiche Beispiele enthalten, wie jQM-Themes letztendlich aussehen können.


 

Seitenübergänge definieren

Ihr werden natürlich früher oder später externe und interne Seiten über die App aufrufen. Ich möchte euch das zunächst anhand eines internen Links zeigen. Aus der Liste heraus soll die zweite interne Seite mit der ID infos aufgerufen werden. Eine entsprechende Anwendung könnte folgendermaßen aussehen:
…
<li><a href="#infos">2D</a></li>
…
<div id="infos" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Mehr zum Thema</h1>
  </div>
  <div data-tole="content">
    <p>Hier folgen die Detailinformationen</p>
  </div>
</div>

Hat man die einzelnen Seiten definiert und die Verlinkungen eingefügt, sind diese bereits nutzbar. jQuery mobile kann aber noch mehr. Denn das Framework stellt einige Transitions-Effekte zur Verfügung, dank derer sich Seitenübergänge definieren lassen. Die möglichen Seitenübergänge sind dabei an die Möglichkeiten angelehnt, die CSS3 in diesem Bereich bietet. Um einen Seitenübergang einzufügen, wird dem Link das data-transition-Attribut hinzugefügt. Als Wert wird diesem Attribut der gewünschte Übergang zugewiesen. Das könnte dann folgendermaßen aussehen:
<li><a href="#infos" data-transition="fade">2D</a></li>

 
jQM unterstützt von Hause aus einige unterschiedliche Seitenübergänge. Standardmäßig wird der Slide-Effekt von links nach rechts verwendet. Insgesamt stehen die folgenden sechs Übergangsvarianten zur Verfügung:

fade - Das ist ein Überblendungseffekt.
flip - Die neue Seite wird eingedreht.
pop - Die neue Seite wird aufgeblendet.
slide - Die neue Seite fährt von rechts nach links ein.
slidedown - Die neue Seite fährt von oben nach unten ein.
slideup - Die neue Seite fährt von unten nach oben ein.

Da man sich einen besseren Eindruck von den verschiedenen Effekten verschaffen kann, wenn man diese in Aktion sieht, solltet ihr einen Blick auf die Seite http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html werfen.

Bilder



Dort findet ihr zu jedem der aufgeführten Effekte ein Beispiel. So könnt ihr direkt selbst entscheiden, welcher der Effekte am besten zu eurer App passt.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 15:31

Herzlichen Dank für das Tutorial

Portrait von MicroSmurf
  • 13.07.2014 - 17:49

Interessant wie immer. Danke.

Portrait von Steve007
  • 26.06.2014 - 20:55

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Kundentest
  • 25.06.2014 - 23:48

Herzlichen Dank für das Tutorial.

Portrait von Lenka
  • 25.06.2014 - 22:52

Danke fürs Tutorial in Textversion.

Portrait von Caesarion2004
  • 25.06.2014 - 18:44

Vielen Dank für das sehr informative und gute Tutorial in Textform.

Portrait von johen
  • 25.06.2014 - 17:59

Herzlichen Dank für das Tutorial in Textversion.

Portrait von Grafips
  • 25.06.2014 - 17:18

Danke für die freien Tutorials - die haben mich nämlich erstmal auf JQM als Option gebracht!

Portrait von BOPsWelt
  • 25.06.2014 - 17:07

Vielen Dank für die klasse Reihe!

Portrait von Kundentest
  • 14.06.2014 - 18:06

Herzlichen Dank für das Video.

Portrait von Steve007
  • 31.05.2014 - 10:40

Vielen Dank für den weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 29.05.2014 - 09:30

Vielen Dank für das interessante Tutorial und die Datei. Wieder sehr verständlich und gut gemacht.

x
×
×