jQuery Mobile - Advanced: Advanced
()
Über dieses E-Book
Mehr von Marco Dierenfeldt lesen
jQuery Mobile: Einfach mobile Web-Apps entwickeln Bewertung: 0 von 5 Sternen0 Bewertungen
Ähnlich wie jQuery Mobile - Advanced
Titel in dieser Serie (100)
Algorithmen: Grundlagen und Implementierung Bewertung: 0 von 5 Sternen0 BewertungenErfolgreiche Spieleentwicklung: OpenGL, OpenAL und KI Bewertung: 0 von 5 Sternen0 BewertungenNFC: Near Field Communication für Android-Entwickler Bewertung: 5 von 5 Sternen5/5Einstieg in Google Go Bewertung: 0 von 5 Sternen0 BewertungenHTML5 Security Bewertung: 0 von 5 Sternen0 BewertungenIT Wissensmanagement: Theorie und Praxis Bewertung: 0 von 5 Sternen0 BewertungenSharePoint-Entwicklung für Einsteiger Bewertung: 0 von 5 Sternen0 BewertungenF#: Ein praktischer Einstieg Bewertung: 0 von 5 Sternen0 BewertungenSkalierbare Softwaresysteme: Design, Betrieb und Optimierungspotenziale Bewertung: 0 von 5 Sternen0 BewertungenUser Experience Testing 3.0: Status Quo, Entwicklung und Trends Bewertung: 0 von 5 Sternen0 BewertungenGeolocation mit PHP: Foursquare-API, Google Places & Qype Bewertung: 0 von 5 Sternen0 BewertungenServiceorientierte Architektur: Anforderungen, Konzeption und Praxiserfahrungen Bewertung: 0 von 5 Sternen0 BewertungenTitanium Mobile: Multi Platform Apps mit JavaScript Bewertung: 0 von 5 Sternen0 BewertungenJavaScript für Eclipse-Entwickler: Orion, RAP und GWT Bewertung: 0 von 5 Sternen0 BewertungenUX Design für Tablet-Websites: Ein Überblick Bewertung: 0 von 5 Sternen0 BewertungenJavaScript auf dem Server Bewertung: 0 von 5 Sternen0 BewertungenJava 7: Fork-Join-Framework und Phaser Bewertung: 0 von 5 Sternen0 BewertungenBPM: Strategien und Anwendungsfälle Bewertung: 0 von 5 Sternen0 BewertungenTFS 2012 Versionskontrolle: Grundlagen, Check-In Policies und Branch-Modelle Bewertung: 0 von 5 Sternen0 BewertungenZend Framework 2: Für Einsteiger und Umsteiger Bewertung: 0 von 5 Sternen0 BewertungenHTML5 für Mobile Web Bewertung: 0 von 5 Sternen0 BewertungenSoftwareentwicklungsprozess: Von der ersten Idee bis zur Installation Bewertung: 0 von 5 Sternen0 BewertungenJava EE Security Bewertung: 0 von 5 Sternen0 BewertungenAgile Architektur mit .NET - Grundlagen und Best Practices Bewertung: 0 von 5 Sternen0 BewertungenTFS 2012 Anforderungsmanagement: Work Items und Prozessvorlagen Bewertung: 0 von 5 Sternen0 BewertungenQualitätssicherung mit JavaScript und PHP Bewertung: 0 von 5 Sternen0 BewertungenJava EE 7: Ein Ausblick Bewertung: 0 von 5 Sternen0 BewertungenÜberzeugende Präsentationen: Konzeption, Technik und Design Bewertung: 0 von 5 Sternen0 BewertungenErfolgreiche Spieleentwicklung: OpenCL Bewertung: 0 von 5 Sternen0 BewertungenSpring: Vier Perspektiven auf Framework und Ökosystem Bewertung: 0 von 5 Sternen0 Bewertungen
Ähnliche E-Books
HTML 5 meets GWT Bewertung: 0 von 5 Sternen0 BewertungenJava ME: Pragmatische Plattform für Mobile und Embedded Bewertung: 0 von 5 Sternen0 BewertungenjQuery Mobile - Basics: Basics Bewertung: 0 von 5 Sternen0 BewertungenMagento Entwicklung: Themes, Widgets und Eigene Entitäten Bewertung: 0 von 5 Sternen0 BewertungenAppInventor2 Befehlssatz Bewertung: 0 von 5 Sternen0 BewertungenXamarin für Android: Einführung in Android GUI und Hardware Bewertung: 0 von 5 Sternen0 BewertungenDurchstarten mit React: Web-Apps einfach und modular entwickeln Bewertung: 0 von 5 Sternen0 BewertungenADF - Mobile Apps entwickeln und Swing ablösen: Mobile Apps entwickeln und Swing ablösen Bewertung: 0 von 5 Sternen0 BewertungenWordPress - Elementor Bewertung: 0 von 5 Sternen0 BewertungenDas Praxisbuch Samsung Galaxy S5 - Teil 1: Einstieg und Grundfunktionen Bewertung: 0 von 5 Sternen0 BewertungenAndroid-Programmierung kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenVaadin Schnelleinstieg Bewertung: 0 von 5 Sternen0 BewertungenApache Tapestry: Einstieg in die komponentenorientierte Webentwicklung Bewertung: 0 von 5 Sternen0 BewertungenWindows 10 Update - Frühjahr 2020: Alles über das große 20H1-Update Bewertung: 0 von 5 Sternen0 BewertungenSoftware entwickeln mit C#, WPF und dem MVVM-Konzept Bewertung: 0 von 5 Sternen0 BewertungenJavaFX Rendering & 3D Bewertung: 0 von 5 Sternen0 BewertungenGWT Best Practices II Bewertung: 0 von 5 Sternen0 BewertungenReact Native: Native Apps parallel für Android und iOS entwickeln Bewertung: 0 von 5 Sternen0 BewertungenDas Praxisbuch Samsung Galaxy Tab 4 Bewertung: 0 von 5 Sternen0 BewertungenBootstrap kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenCross-Device-Entwicklung für Android: Kommunikation mit smarten Geräten Bewertung: 0 von 5 Sternen0 BewertungenJoomla!-Templates. Professionelle Vorlagen mit CSS Bewertung: 0 von 5 Sternen0 BewertungenWindows 10 Update - Frühjahr 2019: Alles zum großen Mai 2019-Update Bewertung: 0 von 5 Sternen0 BewertungenForms over Data mit Knockout.js: Die freie MVVM-JavaScript-Bibliothek im Praxiseinsatz Bewertung: 0 von 5 Sternen0 BewertungenAufsetzen, Testen und Betrieb einer Android-App Bewertung: 0 von 5 Sternen0 BewertungenSingle-Page-Web-Apps: JavaScript im Einsatz: Webseiten erstellen mit AngularJS, Meteor und jQuery Mobile Bewertung: 0 von 5 Sternen0 BewertungenWebtechnologien - All in One: Eine praxisorientierte Einführung in moderne Webtechnologien Bewertung: 0 von 5 Sternen0 BewertungenDas Praxisbuch Samsung Galaxy A21s - Anleitung für Einsteiger Bewertung: 0 von 5 Sternen0 BewertungeniOS Essentials: Frameworks, Tools und Twitter API Bewertung: 0 von 5 Sternen0 BewertungenWindows 7 im Netz: So nutzen Sie das Internet optimal und lösen Netzwerkprobleme Bewertung: 0 von 5 Sternen0 Bewertungen
Internet & Web für Sie
PHP für WordPress: Themes und Templates selbst entwickeln Bewertung: 0 von 5 Sternen0 BewertungenWas kommt. Was geht. Was bleibt.: Kluge Texte über die wichtigsten Fragen unserer Zeit Bewertung: 0 von 5 Sternen0 BewertungenReact lernen und verstehen Bewertung: 0 von 5 Sternen0 BewertungenÜberwachungswahn: ...wie umgehen ?? Bewertung: 0 von 5 Sternen0 BewertungenSo findest du den Einstieg in WordPress: Die technischen Grundlagen zu Installation, Konfiguration, Optimierung, Sicherheit, SEO Bewertung: 0 von 5 Sternen0 Bewertungen30 Minuten Metaverse Bewertung: 0 von 5 Sternen0 BewertungenDer Content Faktor: Schreiben Sie Texte, die gefunden und gelesen werden Bewertung: 0 von 5 Sternen0 BewertungenSEO & WordPress Schnelleinstieg: Plugins, Keywords-entscheidend für die SEO Optimierung Bewertung: 0 von 5 Sternen0 BewertungenEinfach Verschlüsseln Bewertung: 0 von 5 Sternen0 BewertungenWordPress-Themes entwickeln: HTML5, CSS3, JavaScript und PHP: Praxiswissen und Quellcodes zum Entwurf von WordPress-Themes Bewertung: 0 von 5 Sternen0 BewertungenSECURITY AWARENESS: Leitfaden zur IT-Sicherheit für Anwender Bewertung: 0 von 5 Sternen0 BewertungenSEO mit Google Search Console: Webseiten mit kostenlosen Tools optimieren Bewertung: 0 von 5 Sternen0 BewertungenPHP 7 und MySQL: Ihr praktischer Einstieg in die Programmierung dynamischer Websites Bewertung: 0 von 5 Sternen0 BewertungenBloggen -- der moderne Weg zum Reichtum Bewertung: 0 von 5 Sternen0 BewertungenEinführung ins Darknet: Darknet ABC Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 BewertungenStarke Webtexte. So texten Sie Ihre Website selbst Bewertung: 0 von 5 Sternen0 BewertungenJoomla 4.0 logisch!: Einfache Webseitenerstellung ohne Programmierkenntnisse Bewertung: 0 von 5 Sternen0 BewertungenNext Level JavaScript: Schlagworte Bewertung: 0 von 5 Sternen0 BewertungenDas Facebook-Marketing-Buch Bewertung: 4 von 5 Sternen4/5Ich Hacker – Du Script-Kiddy: Hacking und Cracking Bewertung: 0 von 5 Sternen0 BewertungenBlockchain - Und Wie Sie Funktioniert: Der Endgültige Leitfaden Für Einsteiger Über Blockchain Wallet, Mining, Bitcoin, Ethereum, Litecoin Bewertung: 0 von 5 Sternen0 BewertungenJavaScript kinderleicht!: Einfach programmieren lernen mit der Sprache des Web Bewertung: 0 von 5 Sternen0 BewertungenWir machen dieses Social Media Bewertung: 0 von 5 Sternen0 BewertungenDas kleine Hypnose Einmaleins - Alles was Sie schon immer über die Hypnose wissen wollten von Ewald Pipper vom Hypnoseinstitut Bewertung: 0 von 5 Sternen0 BewertungenAndroid Security: Von Fake-Apps, Trojanern und Spy Phones Bewertung: 0 von 5 Sternen0 BewertungenUX-Missverständnisse: Was sich User wirklich wünschen Bewertung: 0 von 5 Sternen0 BewertungenVerschlüsselt! Bewertung: 0 von 5 Sternen0 Bewertungen
Rezensionen für jQuery Mobile - Advanced
0 Bewertungen0 Rezensionen
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