Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Einführung in jQuery Mobile

Seite 3 / 4

Navigation

Die Navigation ist bei mobilen Anwendungen sehr wichtig. Zum Beispiel ist für die Anwendung auf dem Display nicht genug Platz, um einen großen Zurück-Button unterzubringen. In iOS stellen Anwendungen üblicherweise ein Zurück-Button-Symbol in die Kopfzeile der Anwendung. Bei Android-Geräten ist der Zurück-Button per Hardware oder Software realisiert. Anwender kommen so schnell zurück zur vorherigen Seite. Wie soll diese Navigation nun in einer jQM-Anwendung funktionieren? jQM macht es Anwendungen leicht, ihre eigene Navigation mitzubringen. Aber leider verleiht das der Anwendung den typischen iOS-Look.

Schaut euch beispielsweise einmal den folgenden Teil einer Kopfzeile an. Das Ergebnis sehen Sie in Bild 5.

<a href="Default.cshtml" data-icon="check">Save</a>
<h1>Edit Contact</h1>
<a href="Default.cshtml" data-icon="delete" data-theme="b">Exit</a>

Achtet auf die gesetzten data-icon Attribute im Beispiel. Es gibt eine ganze Reihe vordefinierter Symbole. Bild 5 zeigt, wie die <a>-Tags automatisch in Buttons mit abgerundeten Ecken umgewandelt wurden.

Navigationsbuttons erstellt in jQM
Bild 5. Navigationsbuttons erstellt in jQM

Wenn ihr einen Button außerhalb der Kopfzeile erstellen wollt, könnt ihr das Attribut data-role="button" auf einen <a>-Tag anwenden. Wenn ihr in der Kopfzeile in einem Link das Attribut data-rel="back" setzt, wird ein Abbrechen-Button erstellt.

Seiten laden und AJAX

Um von einer Seite zu einer anderen zu navigieren, verwendet jQM einen <a>-Tag. Dies ist Standard-HTML, was ist also so aufregend daran? jQM nimmt sich den <a>-Tag der Anwendung und sorgt für ein bessere Nutzerführung.

Wenn ein Benutzer in einer Webanwendung auf dem Desktop Computer von einer Seite zur nächsten wechselt, dann gibt es da üblicherweise einen Moment, in dem der Bildschirm für ganz kurze Zeit nichts anzeigt, weil der neue Inhalt gerade geladen wird. In einer mobilen Anwendung (App), die auf einem Gerät läuft, gibt es keinen solchen Moment. Normalerweise erscheint eine kurze Animation und ein Aktionsindikator wird angezeigt, während die Seite alle Daten lädt, die sie dem Benutzer anzeigen soll. Wäre es nicht toll, wenn eine mobile Webanwendung dieselben nahtlosen Anzeigen und Übergänge wie in einer systemeigenen mobilen Anwendung drauf hätte?

Dank jQM haben wir die Infrastruktur, um einer mobilen Webanwendung das Navigationserlebnis einer systemeigenen mobilen Anwendung zu verleihen. jQM kann dies aber nicht für jede Seite. Schauen wir uns also einmal die verschiedenen Fälle an. In eine mobilen Webanwendung werden oft mehrere Arten von Links verwendet.

  • Links, die von einer Seite der Anwendung auf eine andere Seite der Anwendung leiten.
  • Links, die von einer Seite der Anwendung auf eine andere Seite in der selben Datei leiten.
  • Links zu anderen jQM-Anwendungen.
  • Links zu keinen jQM-Anwendungen.
  • Spezielle mobile Links, wie zum Beispiel zu einer Telefonnummer.

Ich will mich hier auf die Navigation zwischen Seiten innerhalb der selben Anwendung konzentrieren. Hier ist ein einfaches Beispiel: Wir starten mit Seite 1. Wenn der Benutzer auf den Link zu Seite 2 klickt, wird ihm eine kleine Übergangssequenz angezeigt. Standardmäßig ist das ein sich drehendes Ladesymbol, und dann Seite 2. Wenn man die URL genauer anschaut, sieht man, dass es immer noch die URL von Seite 1 ist, gefolgt von einem Gartenzaunsymbol (#) und danach eine Referenz zu Seite 2. Das magische Laden der Seite wird für uns von jQM ausgeführt und geladen wird durch einen AJAX-Aufruf.

Und wie lädt man eine Seite ohne AJAX? Es gibt zwei Möglichkeiten (vielleicht sogar mehr), um das AJAX-basierte Laden einer Seite zu deaktivieren. Im Code kann man beispielsweise einem <a>-Tag das Attribut data-rel="external" hinzufügen. Dies erzwingt, dass der Link in jQM wie ein absoluter externer Link verwendet wird. Sie können auch das Attribut data-ajax="false" zu einem Link hinzufügen. Dies zwingt jQM so zu tun, als ob der Link ein absoluter externer Link wäre.

Themes und Farbpaletten

Sie werden mittlerweile vielleicht festgestellt haben, dass die jQM-Standard-Farbauswahl ziemlich langweilig ist und sehr nach iOS aussieht. Entwickler haben aber die Möglichkeit, dieses Verhalten mit Hilfe von Farb-Themes zu ändern. Ein Theme in jQM definiert die für die Inhaltsanzeige verwendeten Schriftfarben, Hintergrundfarben, Verläufe und Schriftarten. Wenn ihr das jQuery-UI-ThemeRoller-System kennt, dann wird es euch ziemlich leicht fallen, mit jQM-Themes zu arbeiten.

Im jQM-Theme-System gibt es fünf vordefinierte Farbpaletten, welche mit A, B, C, D und E bezeichnet werden (siehe Bild 6):

  • Das Theme A weist den höchsten Grad visueller Priorität auf. Benutzern wird in diesem Theme der häufige Einsatz der Farbe Schwarz auffallen.
  • Das Theme B weist einen erhöhten Grad visueller Priorität auf. Benutzern wird in diesem Theme der häufige Einsatz der Farbe Blau auffallen.
  • Das Theme C weist den normalen Grad visueller Priorität auf. Benutzern wird in diesem Theme der häufige Einsatz der Farbe Grau auffallen.
  • Das Theme D weist einen alternativen erhöhten Grad auf. Der Unterschied zwischen Theme C und D ist eine sehr geringe Farbvariation in den Hintergrundfarben, die sowohl im Screenshot, als auch auf den Geräten kaum zu erkennen ist. Es ist hier dem Entwickler überlassen, zu entscheiden, ob es in seiner spezifischen Situation einen Unterschied macht.
  • Das Theme E ist eine akzentuierende Farbpalette.
Variationen im jQM-Theme-System
Bild 6. Variationen im jQM-Theme-System

Sie können auch Ihre eigenen Themes erstellen. Verwenden Sie dazu den jQM-ThemeRoller, der hier zu finden ist.

jQuery Mobile Ereignisse und Konfigurierung

Wenn ihr schon mal mit jQuery zu tun hattet, dann kennt ihr auch den Event document.ready. Dieses Ereignis wird ausgelöst, sobald das Dokument einer Seite geladen ist und ist überaus wichtig während dem ersten Laden einer Webseite. Die Seite kann dann nämlich jedweden dynamischen Inhalt von Beginn an erstellen. Bei Mobilgeräten wird dies noch viel wichtiger, weil Benutzer nur ein beschränktes Datenvolumen zur Verfügung haben und deswegen müssen wir mit unserer Datenverarbeitung sehr effizient arbeiten.

jQM lädt Seiten anders als jQuery. In jQuery ist allein der Browser verantwortlich für das Laden von Seiten. Bei jQM werden die Seiten vom Browser via jQM geladen, was ich weiter oben im Artikel bereits abgedeckt habe. Der Unterschied ist dabei, dass nicht garantiert werden kann, dass der document.ready-Event des Dokuments ausgelöst wird, wenn die Seite mit jQm geladen wird.

Um diesem Problem entgegenzuwirken, löst jQM selbst ein Ereignis aus, das mobileinit heißt. Der mobileinit-Event wird ausgelöst, sobald eine Seite mit jQM geladen ist und dem Benutzer angezeigt wird. Der Event wird durch das document-Element gehandhabt und mit der jQuery bind-Methode gebunden:

<script language="javascript" type="text/javascript">
  $(document).bind('mobileinit', function () {
    // Put your initialization code here
    alert("jQM has been successfully initialized.");
    });
</script>

Nach dem mobileinit-Ereignis können etliche andere Ereignisse verarbeitet werden, zum Beispiel:

  • Ob eine Seite erstellt, geladen oder angezeigt ist.
  • Widgets können ein Ereignis auslösen, wenn sich ihr Layout verändert.
  • Ausrichtungsereignisse, die angeben, wie das mobile Gerät bewegt oder gedreht werden kann.
  • Gestenereignisse, damit die Berührungen des Benutzers erkannt werden können.
  • Virtuelle Klickereignisse: Eine Reihe von Ereignissen, die euch helfen, die Ereignisse touchstart und touchmove zu behandeln, ohne dass ihr euch um die Besonderheiten der jeweiligen Plattform kümmern müsst.

Wenn der jQM-mobileinit-Event einmal ausgelöst wurde, ist ein neues Objekt über das jQuery-Hauptobjekt $ verfügbar: das $.mobile Objekt. Innerhalb des $.mobile Objekts können Entwickler eine Menge der Standardeinstellungen von jQM verändern.

Beachte: Der mobileinit Event muss erstellt werden, BEVOR die jQuery-Mobile-.js-Datei geladen wird.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
fimbim

Die Einrückung in dem id="listViewMore" vom "list-divider I" und dem "iPhone" da drunter sind vertauscht.

Antworten
hagh

eine gute Einführung für alle die sich lieber berieseln lassen:
https://www.youtube.com/watch?v=xulY8rKVMaA

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.