Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    jQuery Mobile - Advanced: Advanced
    jQuery Mobile - Advanced: Advanced
    jQuery Mobile - Advanced: Advanced
    Ebook84 pages32 minutes

    jQuery Mobile - Advanced: Advanced

    By Marco Dierenfeldt

    ()

    Read preview

    About this ebook

    Moderne Webentwicklung und gerade die Entwicklung von Web-Apps ist ohne Berücksichtigung von mobilen Endgeräten undenkbar. Sollen diese Web-Apps auf möglichst vielen Plattformen funktionieren, kommt man nicht um die Verwendung eines Frameworks herum. Eines der bekanntesten Frameworks für die mobile Web-App-Entwicklung ist jQuery Mobile. Dieses E-Book setzt voraus, dass der Leser einen gewissen Grundstock an Wissen in den Bereichen JavaScript, Webentwicklung und Grundlagenwissen zu jQuery Mobile mitbringt. Um dieses Wissen auf das benötigte Level zu bringen, kann z. B. auf das E-Book http://entwickler.de/press/jQuery-Mobile-167497 zurückgegriffen werden. In diesem E-Book für das fortgeschrittene Publikum werden Widgets unter Berücksichtigung von Themen wie Responsive Webdesign erklärt und beschrieben. Es wird das Erstellen und Anwenden eigener Themes unter Verwendung des ThemeRollers detailliert erklärt. Zusätzlich werden Möglichkeiten erläutert, dynamisch Inhalte nachzuladen.
    LanguageDeutsch
    Publisherentwickler.press
    Release dateDec 2, 2013
    ISBN9783868024852
    jQuery Mobile - Advanced: Advanced

    Read more from Marco Dierenfeldt

    Related to jQuery Mobile - Advanced

    Titles in the series (100)

    View More
    View More

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Sieh An, Sieh An!

      Sep 22, 2022

      Sieh An, Sieh An!
      11 min read

    • Article

      Sieh An, Sieh An!

      Oct 6, 2022

      Sieh An, Sieh An!
      11 min read

    • Article

      Icons Anpassen Und Widgets Einrichten

      Dec 1, 2022

      Wohl alle kennen die Homescreen-Zwickmühle: Welche der vielen installierten Apps sind so wichtig, dass sie einen der kostbaren Plätze auf dem ersten Bildschirm verdienen? Doch leider ist der Nutzen nicht immer ausschlaggebend, denn niemand möchte sic

      3 min read

    • Article

      Eleganter Auftritt

      Mar 16, 2023

      Eleganter Auftritt
      7 min read

    • Article

      Eleganter Auf tritt

      Mar 16, 2023

      Eleganter Auf tritt
      7 min read

    • Article

      Eine Quelle, viele Apps

      Feb 3, 2022

      Eine Quelle, viele Apps
      9 min read

    • Article

      Widgets

      Dec 4, 2023

      Zu den Highlights von Sonoma gehört natürlich die Möglichkeit, Widgets nicht nur in der Mitteilungszentrale zu nutzen, sondern sie auch direkt auf dem Schreibtisch abzulegen. So hast du sie immer im Blick, wenn du willst. In den Einstellungen für „Sc

      3 min read

    • Article

      Online À La Carte

      Nov 3, 2023

      Online À La Carte
      3 min read

    • Article

      Mit einem Klick

      Aug 4, 2021

      Mit einem Klick
      5 min read

    • Article

      Mit einem Klick

      Aug 4, 2021

      Mit einem Klick
      5 min read

    • Article

      Icons Anpassen Und Widgets Einrichten

      Dec 14, 2022

      Wohl alle kennen die Homescreen-Zwickmühle: Welche der vielen installierten Apps sind so wichtig, dass sie einen der kostbaren Plätze auf dem ersten Bildschirm verdienen? Doch leider ist der Nutzen nicht immer ausschlaggebend, denn niemand möchte sic

      4 min read

    • Article

      Lehrmeister

      May 19, 2022

      Lehrmeister
      6 min read

    • Article

      Fleißiges Helferlein

      Dec 22, 2022

      Fleißiges Helferlein
      10 min read

    • Article

      Völlig Schwerelos

      Nov 17, 2021

      Völlig Schwerelos
      13 min read

    • Article

      Mehr Sein Als Scheinen

      Jun 16, 2022

      Mehr Sein Als Scheinen
      3 min read

    • Article

      Multitasking Auf Dem IPad

      Feb 3, 2024

      Multitasking Auf Dem IPad
      6 min read

    • Article

      Big Sur

      Nov 10, 2020

      Big Sur
      3 min read

    • Article

      Neural Filters

      Jan 7, 2022

      1 Laden Sie das gewünschte Motiv und aktivieren das Objektauswahlwerkzeug aus der Werkzeugpalette. Objektfinder in den Einstellungen sollte mit einem Haken versehen sein – dann wird ein Moment Zeit benötigt, um alle Objekte im Bild zu lokalisieren. F

      3 min read

    • Article

      Neue Ordnung

      Nov 16, 2023

      Neue Ordnung
      6 min read

    • Article

      MacOS

      May 2, 2023

      In den „Displays“-Einstellungen bietet macOS normalerweise einige Einstellungen für den Monitor an, die von „Größerer Text“ bis „Mehr Fläche“ reichen. Fährst du mit dem Zeiger auf die Symbole, blendet die App die Zahl der Pixel ein. Die meisten Bilds

      3 min read

    • Article

      Das Dock

      Jul 7, 2022

      Das Dock ist in zwei Bereiche unterteilt. Links platzierst du Apps und auf der rechten landen offene Fenster, Dokumente und Ordner. Letztere sind eine prima Möglichkeit, um ein volles Dock etwas aufzuräumen und zu entlasten. Legst du einige Apps nich

      3 min read

    • Article

      Vernetzt

      Jul 21, 2022

      Vernetzt
      6 min read

    • Article

      Wissenswelten

      Jul 21, 2022

      Wissenswelten
      5 min read

    • Article

      Schlagzeilen im Blick

      Aug 17, 2023

      Schlagzeilen im Blick
      14 min read

    • Article

      In 34 Schritten zum Mac-Profi

      Dec 4, 2023

      In 34 Schritten zum Mac-Profi
      14 min read

    • Article

      Tick, Tack

      Jul 20, 2023

      Tick, Tack
      4 min read

    • Article

      Zettelwirtschaft Ade

      Feb 16, 2023

      Zettelwirtschaft Ade
      6 min read

    • Article

      Neue Ordnung

      Nov 16, 2023

      Neue Ordnung
      6 min read

    Related categories

    Reviews for jQuery Mobile - Advanced

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      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.

      panelPage01 data-role=page>

      panel data-position=left

      id=panelPage01LeftPanel>

      …

      panelPage01Header data-role=header

      data-position=fixed>

      #panelPage01LeftPanel>links

      …

      panelPage01Content data-role=content>

      …

      panelPage01Footer data-role=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.

      …

      panel data-position=left

      id=panelPage01LeftPanel>

      …

      #startPage data-role=button

      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

      Enjoying the preview?
      Page 1 of 1