Finden Sie Ihr nächstes Lieblings-book
Werden Sie noch heute Mitglied und lesen Sie 30 Tage kostenlosBeginnen Sie Ihre kostenlosen 30 TageInformationen über das Buch
jQuery Mobile - Advanced: Advanced
Buchaktionen
Mit Lesen beginnen- Herausgeber:
- entwickler.press
- Freigegeben:
- Dec 2, 2013
- ISBN:
- 9783868024852
- Format:
- Buch
Beschreibung
Informationen über das Buch
jQuery Mobile - Advanced: Advanced
Beschreibung
- Herausgeber:
- entwickler.press
- Freigegeben:
- Dec 2, 2013
- ISBN:
- 9783868024852
- Format:
- Buch
Über den Autor
Bezogen auf jQuery Mobile - Advanced
Buchvorschau
jQuery Mobile - Advanced - Marco Dierenfeldt
Hyperlinks
1 Widgets zur Strukturierung
In diesem Kapitel werden wir uns mit Widgets beschäftigen, die die Verteilung des Seiteninhalts beeinflussen. Im Zuge dessen werden wir auch das Thema „Responsive Webdesign" an mehreren Stellen streifen. Eine tiefere Behandlung dieses Themas würde leider den Rahmen dieses Buchs sprengen, weshalb ich an dieser Stelle nur auf weiterführende Lektüre verweisen kann.
Dort werden Dinge wie z. B. Media Queries, die wir hier verwenden, detailliert beschrieben. Vereinfacht gesagt geht es bei Responsive Design darum, die Webseite möglichst flexibel zu gestalten, sodass sie sich später in der Benutzung an das jeweilige Endgerät, auf dem sie dargestellt wird, automatisch anpasst. Die häufigste Anpassung betrifft die dargestellte Breite der Webseite, da es ja auch schon einen Unterschied macht, ob man das Smartphone bzw. Tablet hochkant oder quer hält. Aber auch andere Dinge, wie z. B. Auflösungen von Bildern, können eine Rolle spielen.
1.1 Das Panel-Widget
Das erste Widget, das wir in diesem Kontext betrachten, ist das Panel. Es stellt eine weitere Contentebene dar, die zusätzlich zum Seiteninhalt eingeblendet werden kann. Man kann es gut für umfangreichere Menüs, Zusatzinformationen oder kleinere Formulare (z. B. Log-in) nutzen.
Wie im Listing 1.1 zu erkennen ist, werden Panels in „Geschwisterknoten" zu Header und Footer definiert. Die Kennzeichnung als Panel erfolgt über das data-Attribut data-role=panel
. Wie im Header-Bereich in Listing 1.1 zu sehen ist, können Panels ganz einfach mit einem Link auf die ID des Panels, in diesem Fall #panelPage01LeftPanel, geöffnet werden. Wie das linke Panel geöffnet aussieht, ist in Abbildung 1.1 zu sehen.
Des Weiteren sieht man den „Schließen"-Button des Panels recht gut, welcher, wie in Listing 1.2 beschrieben, über das zusätzliche data-Attribut data-rel=close
von jQuery Mobile als Button zum Schließen des Panels erkannt wird.
page>
left
id=panelPage01LeftPanel
>
…
header
data-position=fixed
>
…
content>
…
footer>
…
Listing 1.1: Definition des Panels als Geschwisterknoten zu Header und Footer
Damit der Button auch in Klasse-C-Browsern/-Geräten eine Funktion hat, die analog zum Schließen des Panels auf die Startseite verweist, ist diese über die ID #startPage verlinkt. Außer für Klasse-C-Browser und -Geräte hat dieser Link allerdings keine Bedeutung und wird von jQuery Mobile ignoriert.
…
left
id=panelPage01LeftPanel
>
…
data-rel=close
data-inline=true
data-mini=true
>Panel schließen
…
Listing 1.2: Definition des Schließen-Buttons für das linke Panel
Abbildung 1.1: Linkes Panel geöffnet
Das Panel kann entweder rechts oder links positioniert werden, was über das data-Attribut data-position mit den Werten left und right gesteuert wird.
Das Panel kennt drei unterschiedliche Animationseffekte: overlay, reveal und push. Sie können als Wert dem data-Attribut data-display mitgegeben werden. Der overlay-Effekt bewirkt, dass sich das Panel optisch über den Inhalt der Seite legt und der Seiteninhalt nicht zur Seite verschoben, sondern teilweise vom Inhalt des Panels verdeckt wird. Bei dem Effekt reveal sieht es so
Rezensionen
Rezensionen
Was die Leute über jQuery Mobile - Advanced denken
00 Bewertungen / 0 rezensionen