Johannes Behrndt
2. Juli 2013

Navigation in jQuery Mobile

Fotolia_115308495_XL_mismo

Im ersten Blogeintrag zu jQueryMobile haben wir bereits eine erste App erstellt. Nun wollen wir uns mit der Navigation innerhalb der App beschäftigen.

Unser Whitepaper zum Thema App Entwickler

Whitepaper: App-Entwickler

Sie wollen die Vorteile von Enterprise Mobility in Ihren Unternehmensprozessen komplett ausschöpfen?

Kopieren sie sich hierzu nun ihre erste App und benennen Sie sie beliebig.

Löschen sie nun die Hallo Welt Ausgabe und ersetzen sie sie mit einem Button.

Buttons werden mit folgendem Code erzeugt:

<a href=”#” data-role=”button”>Button</a>

Wobei data-role die Rolle des UI Elements angibt. Dieses Merkmal hat jedes UI Element als Eigenschaft.

Wie aus HTML bekannt beinhaltet a href=“#“ den Link auf den der Button verweisen soll.

Ihre App sollte nun so aussehen:

JQuery Mobile

Ein Klick auf den Button wird den Button nun zwar Farbig hinterlegen, aber da wird “#“ als Ziel angegeben haben bleiben wir auf der aktuellen Seite.

Wie bereits im ersten Blogeintrag erwähnt, ist es möglich in einem HTML Dokument mehrere Seiten als Inhalt anzugeben.

Kopieren sie nun den <section> Teil aus ihrem Quelltext und fügen sie ihn unter dem </section> ein. Benennen sie Anschließend die Section um.

Ihr Quelltext sollte nun so aussehen:

JQuery Mobile

Sie haben nun eine zweite Seite erzeugt die nun über den Button der ersten Seite aufgerufen werden soll.  Ein Klick auf der zweiten Seite bringt sie anschließend wieder zurück auf die erste Seite.

Ändern sie also nun das href Ziel von “#“ auf “#page2“ und auf der zweiten Seite auf “#page1#. Benennen sie anschließend die Buttons noch Sinnvoll.

Testen sie die Navigation.

JQuery Mobile

Im Header Bereich wird nun ein Backbutton vom jQuery Framework selbsttätig erzeugt. Ihr können sie alternativ zu ihrem Button benutzten um zurück auf die erste Seite zu kommen.

Achtung: In den neuern Versionen wird dieser Backbutton nicht mehr automatisch angezeigt sondern ausgeblendet. Um den Back-Button angezeigt zu bekommen, müssen sie ihre Section mit dem zusätzlichen Attribut data-add-back-btn=”true” erzeugen.

Anpassungen des Buttons

Um den Button etwas individueller gestalten zu können, bietet jQuery Mobile das Attribut data-icon.

Der Befehl <a href=”#page2″ data-role=”button” data-icon=”arrow-r” data-iconpos=”right”>Zu Seite 2</a> erzeugt beispielsweise einen Button mit einem Pfeil nach rechts auf der rechten Seite.

JQuery Mobile

Eine komplette Liste von Icons finden sie auf der jQuery Mobile Seite.

Ihr Quellcode könnte zum Abschluss dieser Übung nun so aussehen:

JQuery Mobile

Johannes Behrndt

Johannes Behrndt

Seit über 10 Jahren berate ich große und mittelständische Unternehmen rund um mobile Lösungen, insbesondere im SAP-Umfeld. Ich habe den Überblick über die relevanten SAP-Prozesse und kenne die neuesten Technologien für mobile Lösungen.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren

Dieser Beitrag soll einen kurzen Einblick in jQuery Mobile bieten. Es wird eine mobile Webseite mit einem einfachen Hello World entstehen.

weiterlesen

In den letzten beiden Blogbeiträgen der SAP UI5 Reihe habe ich mich einmal mit HTML5 und zum anderen mit CSS, (Cascading Style Sheets) der Möglichkeit seiner mit HTML definierten Webseite […]

weiterlesen

UI5 verfügt über hunderte Icons. Trotzdem kommt es immer wieder vor, dass beim Design einer App genau das gewünschte Icon nicht existiert. Ich zeige Ihnen, wie Sie Ihre eigenen Icons […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Sophie Weber
Sophie Weber Kundenservice