Erstellen Sie mit jQuery Mobile eine mobile Website

  • Erforderliche Kenntnisse: Beginn von HTML5, Zwischen-CSS, jQuery und jQuery Mobile
  • Benötigt: jQuery- und jQuery Mobile-Bibliotheken sowie ein Texteditor
  • Projektzeit: 4-6 Stunden
  • Support-Datei

Dies ist ein bearbeiteter Auszug aus Kapitel 15 von Murachs HTML5 und CSS3 von Zak Ruvalcaba und Anne Boehm.

wie man einen Themenpark baut

jQuery Mobile ist eine kostenlose plattformübergreifende Open-Source-JavaScript-Bibliothek, die Sie für die Entwicklung mobiler Websites verwenden können. Mit dieser Bibliothek können Sie Seiten erstellen, die wie die Seiten einer nativen mobilen Anwendung aussehen und sich anfühlen.

Obwohl jQuery Mobile derzeit als Beta-Testversion verfügbar ist, bietet diese Version bereits alle Funktionen, die Sie für die Entwicklung einer hervorragenden mobilen Website benötigen. Infolgedessen können Sie es sofort verwenden. Sie können auch erwarten, dass diese Version kontinuierlich verbessert wird, sodass jQuery Mobile nur noch besser wird.



In diesem Artikel lernen Sie die grundlegenden Techniken zum Erstellen der Seiten einer mobilen Website kennen. Dazu gehört die Verwendung von Dialogfeldern, Schaltflächen und Navigationsleisten.

  • Lesen Sie alle unsere Webdesign-Artikel Hier

01. So codieren Sie mehrere Seiten in einer einzigen HTML-Datei

Im Gegensatz zur Entwicklung der Webseiten für eine Bildschirmwebsite können Sie mit jQuery Mobile mehrere Seiten in einer einzigen HTML-Datei erstellen. Dies ist in Abbildung 15-7 dargestellt. Hier sehen Sie zwei Seiten einer Site zusammen mit dem HTML-Code für diese Seiten. Überraschend ist, dass beide Seiten in einer einzigen HTML-Datei codiert sind.

Für jede Seite codieren Sie ein div-Element mit 'page' als Wert des Datenrollenattributs. Anschließend codieren Sie in jedem dieser div-Elemente die div-Elemente für die Kopf-, Inhalts- und Fußzeile jeder Seite. Später, wenn die HTML-Datei geladen wird, wird die erste Seite im Hauptteil der Datei angezeigt.

Um eine Verknüpfung zwischen den Seiten in der HTML-Datei herzustellen, verwenden Sie Platzhalter, wie in Abbildung 7-11 von Kapitel 7 dargestellt Das Element auf der ersten Seite in diesem Beispiel wechselt zu '#toobin', wenn der Benutzer auf das h2- oder img-Element tippt, das als Inhalt für diesen Link codiert ist. Dies bezieht sich auf das div-Element mit 'toobin' als ID-Attribut. Dies bedeutet, dass das Tippen auf den Link den Leser zur zweiten Seite in der Datei führt.

Obwohl dieses Beispiel nur zwei Seiten zeigt, können Sie viele Seiten in einer einzelnen HTML-Datei codieren. Beachten Sie jedoch, dass alle Seiten zusammen mit ihren Bildern, JavaScript- und CSS-Dateien mit der einzigen HTML-Datei geladen werden. Infolgedessen wird die Ladezeit zu lang, wenn Sie zu viele Seiten in einer einzelnen Datei speichern. In diesem Fall können Sie Ihre Seiten in mehrere HTML-Dateien aufteilen.

Zwei Webseiten, die jQuery Mobile verwenden

Zwei Webseiten, die jQuery Mobile verwenden

Der HTML-Code für die beiden Seiten im Hauptteil einer HTML-Datei:


SJV Rathaus



Die 2011-2012 Sprecher



Jeffrey Toobin
19. Oktober 2011


Jeffrey Toobin



2011




SJV Rathaus



Die Höchsten Neun:
Black Robed Secrets


Jeffrey Toobin

Autor des von der Kritik gefeierten Bestsellers, Die Neun:


2011


Beschreibung

  • Wenn Sie jQuery Mobile verwenden, müssen Sie nicht für jede Seite eine eigene HTML-Datei entwickeln. Stattdessen codieren Sie innerhalb des body-Elements einer einzelnen HTML-Datei ein div-Element für jede Seite, wobei das Datenrollenattribut auf 'page' gesetzt ist.
  • Für jedes div-Element setzen Sie das id-Attribut auf einen Platzhalterwert, auf den die href-Attribute in der Datei zugreifen können Elemente anderer Seiten.

02. Verwendung von Dialogfeldern und Übergängen

Abbildung 15-8 zeigt, wie Sie ein Dialogfeld erstellen, das beim Tippen auf einen Link geöffnet wird. Dazu codieren Sie das Dialogfeld wie jede andere Seite. Aber in der Element, das zu dieser Seite geht, codieren Sie ein data-rel-Attribut mit dem Wert „Dialog“.



Wie die Beispiele in dieser Abbildung zeigen, formatiert die jQuery Mobile CSS-Datei ein Dialogfeld anders als eine normale Webseite. Standardmäßig hat ein Dialogfeld einen dunklen Hintergrund mit weißem Vordergrundtext, und Kopf- und Fußzeile erstrecken sich nicht über die Breite der Seite. Ein Dialogfeld enthält außerdem ein 'X' in der Kopfzeile, auf das der Benutzer tippen muss, um zur vorherigen Seite zurückzukehren.

Wenn Sie eine codieren Element, das zu einer anderen Seite oder einem anderen Dialogfeld wechselt. Sie können auch das Datenübergangsattribut verwenden, um einen der sechs Übergänge anzugeben, die in der Tabelle in dieser Abbildung zusammengefasst sind. Jeder dieser Übergänge soll einen Effekt nachahmen, den ein mobiles Gerät wie ein iPhone verwendet.

Eine Seite (links) und ein Dialogfeld (rechts) mit demselben HTML-Code

Eine Seite (links) und ein Dialogfeld (rechts) mit demselben HTML-Code

03. Die Übergänge, die verwendet werden können

rutschenDie nächste Seite wird von rechts nach links eingeblendet.
SlideupDie nächste Seite wird von unten nach oben verschoben.
herunterrutschenDie nächste Seite wird von oben nach unten eingeblendet.
PopDie nächste Seite wird in der Mitte des Bildschirms eingeblendet.
verblassenDie nächste Seite wird eingeblendet.
FlipDie nächste Seite blättert von hinten nach vorne, ähnlich wie eine umgedrehte Spielkarte. Dieser Übergang wird auf einigen Geräten nicht unterstützt.

HTML, das die Seite als Dialogfeld mit dem Übergang 'Pop' öffnet:

HTML, das die Seite mit dem Übergang 'Überblenden' öffnet:

Beschreibung

04. So erstellen Sie Schaltflächen

Abbildung 15-9 zeigt, wie Sie mit Schaltflächen von einer Seite zur anderen navigieren. Dazu legen Sie einfach das Datenrollenattribut für ein fest Element auf 'Schaltfläche', und jQuery Mobile erledigt den Rest.
Sie können jedoch auch einige andere Attribute für Schaltflächen festlegen. Wenn Sie beispielsweise möchten, dass zwei oder mehr Schaltflächen nebeneinander angezeigt werden, wie die ersten beiden Schaltflächen in dieser Abbildung, können Sie das Daten-Inline-Attribut auf 'true' setzen.

Wenn Sie einer der 18 von jQuery Mobile bereitgestellten Symbole zu einer Schaltfläche hinzufügen möchten, codieren Sie auch das Attribut data-icon. Beispielsweise verwendet die dritte Schaltfläche in diesem Beispiel das Symbol 'Löschen' und die vierte Schaltfläche das Symbol 'Startseite'. Alle diese Symbole sehen aus wie die Symbole, die Sie möglicherweise in einer nativen mobilen Anwendung sehen. Im Übrigen sind diese Symbole keine separaten Dateien, auf die die Seite zugreifen muss. Stattdessen werden sie von der jQuery Mobile-Bibliothek bereitgestellt.

Wenn Sie zwei oder mehr Schaltflächen horizontal gruppieren möchten, z. B. die Schaltflächen Ja, Nein und Vielleicht in dieser Abbildung, können Sie die Schaltflächen codieren Elemente für die Schaltflächen innerhalb eines div-Elements, dessen Datenrollenattribut 'Steuergruppe' und als Datentypattribut 'horizontal' ist. Um die Schaltflächen vertikal zu gruppieren, können Sie das Datentypattribut in 'vertikal' ändern.

Wenn Sie das data-rel-Attribut für eine Schaltfläche auf 'back' und das href-Attribut auf das Pfundsymbol (#) setzen, kehrt die Schaltfläche zu der Seite zurück, auf der sie aufgerufen wurde. Mit anderen Worten, die Schaltfläche funktioniert wie eine Zurück-Schaltfläche. Dies wird durch die letzte Schaltfläche im Inhalt der Seite veranschaulicht.

Die letzten beiden Schaltflächen zeigen, wie Schaltflächen in der Fußzeile einer Seite angezeigt werden. Hier sind die Symbole und der Text weiß vor einem schwarzen Hintergrund. In diesem Fall wird das Klassenattribut für die Fußzeile auf 'ui-bar' gesetzt, was jQuery Mobile mitteilt, dass der Inhalt der Fußzeile etwas mehr Platz enthalten soll. Weitere Informationen hierzu finden Sie in Abbildung 15-12.

Eine mobile Webseite, auf der Schaltflächen angezeigt werden

Eine mobile Webseite, auf der Schaltflächen angezeigt werden

Der HTML-Code für die Schaltflächen im Abschnitt:


Stornieren
OK

Löschen
Zuhause


Ja
Unterlassen Sie
Kann sein



zurück zur vorherigen Seite

Der HTML-Code für die Schaltflächen in der Fußzeile:


data-icon = 'plus'> Zu Facebook hinzufügen
data-icon = 'plus'> Diese Seite twittern

Beschreibung

05. So erstellen Sie eine Navigationsleiste

Abbildung 15-10 zeigt, wie Sie einer Webseite eine Navigationsleiste hinzufügen können. Dazu codieren Sie ein div-Element, dessen Datenrolle auf 'navbar' gesetzt ist. Innerhalb dieses Elements codieren Sie ein ul-Element, das li-Elemente enthält, die das enthalten Elemente für die Elemente in der Navigationsleiste. Beachten Sie jedoch, dass Sie das Datenrollenattribut für das nicht codieren Elemente.

Um die Farbe für die Elemente in der Navigationsleiste zu ändern, enthält der Code in diesem Beispiel das Attribut data-theme-b für jedes Element. Infolgedessen ändert jQuery Mobile die Hintergrundfarbe jedes Elements von Schwarz (Standardeinstellung) in ein attraktives Blau. Darüber hinaus setzt dieser Code das Klassenattribut für die aktive Schaltfläche auf 'ui-btn-active', sodass jQuery Mobile die Farbe für die aktive Schaltfläche in ein helleres Blau ändert. Dies zeigt, wie Sie die von jQuery Mobile verwendete Formatierung ändern können. Weitere Informationen hierzu finden Sie im Folgenden.

Eine mobile Webseite mit einer Navigationsleiste

Eine mobile Webseite mit einer Navigationsleiste

Der HTML-Code für die Navigationsleiste


SJV Rathaus





Sandisk Speicherkarte für Canon Kamera

06. So codieren Sie den HTML-Code für eine Navigationsleiste:

07. So formatieren Sie Inhalte mit jQuery Mobile

Wie Sie bereits gesehen haben, formatiert jQuery Mobile die Komponenten einer Webseite automatisch anhand eines eigenen Stylesheets. Jetzt erfahren Sie mehr darüber und wie Sie das von jQuery Mobile verwendete Standard-Styling anpassen.

08. Die Standardstile, die jQuery Mobile verwendet

Abbildung 15-13 zeigt die Standardstile, die jQuery Mobile für allgemeine HTML-Elemente verwendet. Bei allen Stilen stützt sich jQuery Mobile auf die Rendering-Engine des Browsers, sodass das eigene Design minimal ist. Dies hält die Ladezeiten schnell und minimiert den Overhead, den übermäßiges CSS auf einer Seite verursachen würde.



Winsor und Newton Series 7 Bürsten

Wie Sie sehen, ist das Styling von jQuery Mobile so effektiv, dass Sie das Styling nicht ändern müssen, indem Sie Ihr eigenes CSS-Stylesheet bereitstellen. Beispielsweise sind der Abstand zwischen den Elementen in der ungeordneten Liste und die Formatierung der Tabelle so wie sie sind akzeptabel. Außerdem stimmt der schwarze Typ auf dem grauen Hintergrund mit der Formatierung für native mobile Anwendungen überein.

Die Standardstile für allgemeine HTML-Elemente

Die Standardstile für allgemeine HTML-Elemente

Beschreibung

  • Standardmäßig wendet jQuery Mobile automatisch Stile auf die HTML-Elemente einer Seite an. Diese Stile sind nicht nur attraktiv, sondern ahmen auch die nativen Stile eines Browsers nach.
  • Standardmäßig wendet jQuery Mobile links, rechts, oben und unten auf jeder mobilen Seite eine kleine Auffüllung an.
  • Standardmäßig sind Links etwas größer als normaler Text. Dies erleichtert dem Benutzer das Tippen auf die Links.
  • Standardmäßig werden Links mit Blau als Schriftfarbe unterstrichen.

09. So wenden Sie Themen auf HTML-Elemente an

In einigen Fällen möchten Sie die von jQuery Mobile verwendeten Standardstile ändern. Das haben Sie bereits in der Navigationsleiste von Abbildung 15-10 gesehen. Um die Standardstile zu ändern, können Sie die fünf von jQuery Mobile bereitgestellten Themen verwenden. Diese sind in Abbildung 15-12 zusammengefasst. Auch hier sollen diese Themen das Erscheinungsbild einer nativen mobilen Anwendung nachahmen.

Eine Möglichkeit, Themen anzuwenden, besteht darin, ein Datenthema-Attribut mit dem Themenbuchstaben als Wert zu codieren. Sie haben dies in der Navigationsleiste in Abbildung 15-10 gesehen, und Sie können dies im Code für die zweite Navigationsleiste in dieser Abbildung sehen. Hier wendet das Datenthema-Attribut das Thema 'e' auf die Kopfzeile und das Thema 'd' auf die Elemente in der Navigationsleiste an.

Die andere Möglichkeit, Themen anzuwenden, besteht darin, das Klassenattribut für ein Element auf einen Klassennamen festzulegen, der ein Thema angibt. Dies wird durch das erste Beispiel nach der Tabelle veranschaulicht. Hier wird das Klassenattribut verwendet, um sowohl die Klassen 'ui-bar' als auch 'ui-bar-b' auf das div-Element anzuwenden. Infolgedessen wendet jQuery Mobile zuerst das Standard-Styling für einen Balken auf das Element an und wendet dann das b-Design auf dieses Styling an. Auf den folgenden Seiten sehen Sie weitere Beispiele für diese Art von Styling.

Bitte beachten Sie, dass in der Tabelle in dieser Abbildung angegeben ist, dass das Thema e sparsam verwendet werden soll. Dies liegt daran, dass eine orange Farbe verwendet wird, die für die Akzentuierung eines Elements geeignet ist, in großen Dosen jedoch nicht attraktiv ist. Dies wird durch die zweite Kopfzeile und die Navigationsleiste in dieser Abbildung veranschaulicht, die beim Anzeigen in Farbe zu Erschütterungen führen können.

Im Allgemeinen ist es am besten, die Standardstile und die ersten drei Themen beizubehalten, die normalerweise gut zusammenarbeiten. Dann können Sie mit den Themen d und e experimentieren, wenn Sie denken, dass Sie etwas mehr brauchen.

Zwei Überschriften und Navigationsleisten (links: Überschrift „a“, Leiste „b“; rechts: Überschrift „e“, Leiste „d“) veranschaulichen die Verwendung von Themen

Der HTML-Code für die zweite Kopfzeile und Navigationsleiste:


SJV Rathaus





Die fünf jQuery Mobile-Themen:

zuSchwarzer Hintergrund mit weißem Vordergrund. Dies ist die Standardeinstellung.
bBlauer Hintergrund mit weißem Vordergrund.
cHellgrauer Hintergrund mit schwarzem Vordergrund. Der Text wird fett angezeigt.
dDunkelgrauer Hintergrund mit schwarzem Vordergrund. Text wird nicht fett angezeigt.
istOrange Hintergrund mit schwarzem Vordergrund. Verwenden Sie für Akzente und sparsam.

10. Zwei Möglichkeiten, ein Thema anzuwenden:

Mithilfe eines Datenthema-Attributs:



  • data-icon = 'home' data-theme = 'b'> Home
  • Durch Verwendung eines Klassenattributs, das das Thema angibt:

    Bar

    Beschreibung

    • Mithilfe der fünf in jQuery Mobile enthaltenen Designs können Sie die Standardstile für die HTML-Elemente entsprechend anpassen.
    • Obwohl Sie mit einer jQuery Mobile-Anwendung Ihr eigenes CSS-Stylesheet verwenden können, sollten Sie dies nach Möglichkeit vermeiden.

    11. Perspektive

    Die Nutzung mobiler Geräte hat in den letzten Jahren dramatisch zugenommen. Aus diesem Grund ist es immer wichtiger geworden, Websites zu entwerfen, die mit diesen Geräten einfach zu verwenden sind. Obwohl dies normalerweise die Entwicklung einer separaten Website bedeutet, kann dies ein kritischer Aspekt für die Aufrechterhaltung Ihrer Präsenz im Internet sein.

    Glücklicherweise ist die Erstellung einer mobilen Website mit dem Aufkommen von jQuery Mobile viel einfacher geworden. Mobile Webseiten sind nicht mehr auf statische Seiten beschränkt, die Überschriften, Absätze, Links und Miniaturbilder enthalten. Mit jQuery Mobile können Webentwickler jetzt funktionsreiche Websites erstellen, die wie native mobile Anwendungen aussehen und sich anfühlen.

    Mochte dies? Lese das!