Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 10): jQuery mobile (2)

Web-Apps erstellen (Teil 10): jQuery mobile (2)

In diesem Video-Training wird die erste echte jQM-Seite erstellt. Voraussetzung dafür ist das HTML-Grundgerüst, das ihr bereits kennengelernt habt. Das bildet die Basis für die weiteren Arbeiten. Diese momentan optisch zugegebenermaßen noch recht mau aussehende Seite wird nun Schritt für Schritt mit den typischen Elementen einer Web-App ausgestattet. Zunächst werdet ihr zwei Seiten für die App anlegen und diese dann direkt mit einem Kopf- und einem Fußbereich ausstatten. Und was darf bei einer App auf gar keinen Fall fehlen? Genau, ansprechende Icons. Auch das ist also ein Thema dieses Video-Trainings.

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


Die Web-App, um die es zunächst geht, soll aus zwei Seiten bestehen. In der ersten Seite ist eine einfache Liste enthalten. Klickt man einen der Listeneinträge an, wird das Verweisziel in der zweiten Seite angezeigt.

Zunächst also die Seite, in der die Liste definiert ist.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PSD-Tutorials.de</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div id="top">
  <h1>Willkommen bei PSD-Tutorials.de</h1>
  <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>
</body>
</html>

 
Es handelt sich hierbei zunächst einmal um ein einfaches HTML-Dokument.

Bilder



Eine echte jQM-Anwendung wird es allerdings erst, wenn das bereits vorgestellte Attribut data-role und dessen passende Werte richtig verwendet werden.

 
Zunächst wird die Seite explizit mittels data-role um einen Kopf- und einen Inhaltsbereich erweitert.
<body>
<div id="top" data-role="page">
   <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> 
</body>

 
Lässt man sich das Zwischenergebnis im Browser anzeigen, tut sich nun wenigstens schon etwas.

Bilder



Die Überschrift wirkt jetzt tatsächlich wie ein echter App-Kopfbereich. Nicht schlecht für den Anfang, aber natürlich noch längst nicht genug. Was jetzt noch fehlt, ist ein Fußbereich.
<li><a href="">Web</a></li>
  </ul>
 </div>
 <div data-role="footer">
  <a href="about.html">Über uns</a>
 </div>
</div> 
</body>
</html>

 
Auch jetzt lohnt wieder ein Blick auf das Ergebnis im Browser.

Bilder



Die Seite besitzt also auch einen echten Fußbereich.


Die nächste Seite anlegen

Wie bereits beschrieben, soll die App zunächst einmal aus zwei Seiten bestehen. (Später kommen natürlich noch weitere hinzu). Ich greife in diesem Zusammenhang auf den Mehrseitentyp zurück, die zweite Seite wird also direkt mit in die erste Seite aufgenommen. Alternativ dazu könnt ihr natürlich auch auf die Einzelseitenvariante setzen.

Diese Seite setzt sich wieder aus den nun schon bekannten div-Elementen mit dem data-role-Attribut zusammen.
<div id="top" 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>

Insgesamt sollte die Seite folgendermaßen aussehen:
<div id="top" data-role="page">
  <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"> <a href="about.html">Über uns</a> </div>
</div>
<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>

Lässt man sich nun das Ergebnis im Browser anzeigen, ist von der zweiten Seite zunächst einmal nichts zu sehen, was so natürlich völlig in Ordnung ist. Schließlich soll diese zweite Seite ja erst angezeigt werden, wenn auf einen Listeneintrag geklickt wird.


 

Den Fußbereich ausbauen

Momentan ist im Fußbereich lediglich der Eintrag Über uns zu sehen.

Bilder



Nun eignet sich die Fußzeile aber natürlich hervorragend, um darin eine Navigation zu platzieren. Der Fußbereich soll insgesamt vier Hyperlinks enthalten.

Über uns
Kontakt
Anfahrt
Impressum

 
Realisiert wird eine entsprechende Navigation über eine ungeordnete Liste. Damit die Einträge tatsächlich gleich nebeneinander und wie echte Schaltflächen angezeigt werden, wird data-role="navbar" verwendet.
<div id="top" data-role="footer">
 <div data-role="navbar">
 <ul>
 <li><a href="about.html">Über uns</a></li>
 <li><a href="about.html">Kontakt</a></li>
 <li><a href="about.html">Anfahrt</a></li>
 <li><a href="about.html">Impressum</a></li>
 </li>
 </div>
 </div>

Auch jetzt darf ein Blick auf das Ergebnis im Browser natürlich nicht fehlen.

Bilder



 

Icons verwenden

Für mobile Anwendungen haben sich mittlerweile einige Grafiken etabliert, die jeder sofort versteht. Ein typisches Beispiel dafür ist der kreisrunde Pfeil, über den sich Webseiten/Anwendungen aktualisieren lassen. jQM stellt einige vordefinierte Icons zur Verfügung, die ihr ganz einfach in eure Webseite einbinden könnt. Ansehen könnt ihr euch die Icons auf der Seite http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html.

Bilder



Da ist schon mal eine ganze Menge an interessanten Icons dabei. Aber keine Bange, wer hier nicht fündig wird, kann auch andere Symbole verwenden. Zunächst wollen wir uns aber mit dem zufriedengeben, was jQM von Hause aus zu bieten hat.

 
Um einem Hyperlink ein Icon hinzuzufügen, wird dem a-Element das Attribut data-icon zugewiesen. Als Wert erwartet dieses Attribut den Namen des entsprechenden Symbols. Diesen Namen könnt ihr auf der bereits genannten Webseite ermitteln.

Bilder



Mit diesem Wissen ausgestattet, könnt ihr die gewünschte Anwendung erstellen.
<div id="top" data-role="footer">
 <div data-role="navbar">
 <ul>
 <li><a href="about.html" data-icon="info">Über uns</a></li>
 <li><a href="about.html" data-icon="grid">Kontakt</a></li>
 <li><a href="about.html" data-icon="star">Anfahrt</a></li>
 <li><a href="about.html" data-icon="gear">Impressum</a></li>
 </li>
 </div>
 </div>

 
Und auch jetzt wieder ein Blick auf das Ergebnis.

Bilder



Standardmäßig werden die Icons oberhalb vom Schaltflächentext angezeigt. Dieses Verhalten lässt sich über das Attribut data-iconpos verändern. Dieses Attribut weist man allerdings nicht den jeweiligen a-Elementen zu. Vielmehr gehört es in das div-Element mit der Attribut-Wert-Kombination data-role="navbar".
<div id="top" data-role="footer">
 <div data-role="navbar" data-iconpos="bottom">
 <ul>
 <li><a href="about.html" data-icon="info">Über uns</a></li>
 <li><a href="about.html" data-icon="grid">Kontakt</a></li>
 <li><a href="about.html" data-icon="star">Anfahrt</a></li>
 <li><a href="about.html" data-icon="gear">Impressum</a></li>
 </li>
 </div>
 </div>

 
Als Werte können data-iconpos die folgenden Varianten zugewiesen werden:

left - links
right - rechts
top - mittig, oberhalb des Textes
bottom - mittig, unterhalb des Textes

Auf diese Weise könnt ihr also den Hyperlinks die gewünschten Icons hinzufügen. Am Ende dieses Tutorials sollte eine erste Seite erstellt sein, in deren Fußbereich sich eine Navigation mit einigen Symbolen befindet.

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

Vielen Dank für das Tutorial!

Portrait von Cherifa
  • 21.07.2014 - 09:24

Vielen Dank für dieses TUT - viele liebe Grüße

C.

Portrait von MicroSmurf
  • 13.07.2014 - 17:38

Interessant wie immer. Danke.

Portrait von hierkarl
  • 04.07.2014 - 14:53

vielen dank, wieder ein spannendes Tutorial :)

Portrait von Steve007
  • 26.06.2014 - 20:54

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

Portrait von Domingo
  • 23.06.2014 - 22:27

Gefällt mir, vielen Dank.

Portrait von johen
  • 23.06.2014 - 19:28

Tolles Video vielen Dank.

Portrait von johen
  • 23.06.2014 - 19:27

Danke für die Textversion der Reihe.

Portrait von HeinzGeorg
  • 23.06.2014 - 18:58

Sieht einfach aus, ist aber doch sehr mit "Codewörten" versehen, die man lernen muss.

Vielen Dank für die sehr anschaulichen Beispiele der Programmierung.

HTML ist im Kommentarfeld leider nicht möglich, dann hätte ich "strukturierter" antworten können.

Portrait von Kundentest
  • 23.06.2014 - 17:38

Herzlichen Dank für das weitere interessante Tutorial.

Portrait von Caesarion2004
  • 23.06.2014 - 16:59

Vielen Dank für den interessanten und informativen weiteren Teil der Reihe.

Portrait von BOPsWelt
  • 23.06.2014 - 16:07

Vielen Dank für den nächsten Teil der Reihe, klasse Arbeit!

Portrait von Kundentest
  • 14.06.2014 - 18:03

Herzlichen Dank für das Video.

Portrait von Steve007
  • 28.05.2014 - 16:53

Vielen Dank für Dein interessantes Video - Training.

Portrait von MicroSmurf
  • 28.05.2014 - 12:39

Vielen Dank für den weiteren Teil.

Portrait von Caesarion2004
  • 27.05.2014 - 19:20

Vielen Dank für das informative und verständliche Tutorial. Gerne mehr hierzu.

x
×
×