Erstellen Sie mit jQuery Mobile eine mobile Website

Inhalt

• So codieren Sie mehrere Seiten in einer einzigen HTML-Datei
• Beschreibung
• Verwendung von Dialogfeldern und Übergängen
• Die Übergänge, die verwendet werden können
• Beschreibung
• So erstellen Sie Schaltflächen
• Beschreibung
• So erstellen Sie eine Navigationsleiste
• So codieren Sie den HTML-Code für eine Navigationsleiste:
• So formatieren Sie Inhalte mit jQuery Mobile
• Die Standardstile, die jQuery Mobile verwendet
• Beschreibung
• So wenden Sie Themen auf HTML-Elemente an
• Zwei Möglichkeiten, ein Thema anzuwenden:
• Beschreibung
• Perspektive

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

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.

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. Beispielsweise wird das Element a> auf der ersten Seite in diesem Beispiel an „#toobin“ gesendet, wenn der Benutzer auf das tippt h2- oder img-Element, das als Inhalt für diesen Link codiert ist. Dies bezieht sich auf das div-Element mit "toobin" als ID-Attribut. Das bedeutet, dass durch Tippen auf den Link der Leser zur zweiten Seite in der Datei gelangt.

Obwohl dieses Beispiel nur zwei Seiten zeigt, können Sie viele Seiten in einer einzigen 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.

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

div data-role = "page"> header data-role = "header"> h1> SJV-Rathaus / h1> / header> section data-role = "content"> h3> Die 2011-2012-Sprecher / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19. Oktober 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - DIE ELEMENTE FÜR DEN REST DER LAUTSPRECHER - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV-Rathaus / h1> / header> section data-role = "content"> h3> Die höchsten Neun: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor des von der Kritik gefeierten Bestsellers i> The Nine :! - DIE KOPIE GEHT WEITER -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

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 den a> -Elementen anderer Seiten zugreifen können.

Verwendung von Dialogfeldern und Übergängen

Abbildung 15-8 zeigt, wie Sie ein Dialogfeld erstellen, das geöffnet wird, wenn auf einen Link getippt wird. Dazu codieren Sie das Dialogfeld wie jede andere Seite. In dem a> -Element, das zu dieser Seite führt, codieren Sie jedoch 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 ein a> -Element codieren, das zu einer anderen Seite oder einem anderen Dialogfeld wechselt, können Sie 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.

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

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

a href = "# toobin" data-rel = "dialog" data-Transition = "pop">

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

a href = "# toobin" data-Transition = "fade">

Beschreibung

• Der HTML-Code für a Dialogbox wird so codiert, wie eine Seite codiert ist. Das Element a>, das mit der Seite verknüpft ist, enthält jedoch das Attribut data-rel mit dem Wert "dialog". Um das Dialogfeld zu schließen, tippt der Benutzer auf das X in der Kopfzeile des Felds.
• Um festzulegen, wie eine Seite oder ein Dialogfeld geöffnet wird, können Sie das Datenübergangsattribut mit einem der Werte in der obigen Tabelle verwenden. Wenn ein Gerät den von Ihnen angegebenen Übergang nicht unterstützt, wird das Attribut ignoriert.
• Das Styling für ein Dialogfeld erfolgt über die jQuery Mobile CSS-Datei.

So erstellen Sie Schaltflächen

Abbildung 15-9 zeigt, wie Sie mit Schaltflächen von einer Seite zur anderen navigieren. Dazu setzen Sie einfach das Datenrollenattribut für ein a> -Element auf "button", den Rest erledigt jQuery Mobile.
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 Datensymbolattribut. 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. Diese Symbole sind übrigens 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, wie z. B. die Schaltflächen Ja, Nein und Vielleicht in dieser Abbildung, können Sie die a> -Elemente für die Schaltflächen in einem div-Element codieren, dessen Datenrollenattribut „controlgroup“ und "Horizontal" als Datentypattribut. 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. Mehr dazu erfahren Sie in Abbildung 15-12.

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

! - Setzen Sie für Inline-Schaltflächen das Datenzeilenattribut auf true -> a href = "#" data-role = "button" data-inline = "true"> Abbrechen / a> a href = "#" Daten -role = "button" data-inline = "true"> OK / a>! - Um einer Schaltfläche ein Symbol hinzuzufügen, verwenden Sie das Attribut data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Verwenden Sie zum Gruppieren von Schaltflächen ein div-Element mit die folgenden Attribute -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Ja / a> a href = "#" data-role = "button" data-icon = "Pfeil-d"> Nein / a> a href = "#" data-role = "button"> Vielleicht / a> / div>! - To Codieren Sie eine Zurück-Schaltfläche und setzen Sie das Attribut data-rel auf back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Zurück zur vorherigen Seite / a >

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

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Zu Facebook hinzufügen / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Diese Seite twittern / a> / footer>

Beschreibung

• Um einer Webseite eine Schaltfläche hinzuzufügen, codieren Sie ein a> -Element, dessen Datenrollenattribut auf "Schaltfläche" gesetzt ist.

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 die a> -Elemente für die Elemente in der Navigationsleiste enthalten. Beachten Sie jedoch, dass Sie das Datenrollenattribut für die Elemente a> nicht codieren.

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, und Sie werden als Nächstes mehr darüber erfahren.

Der HTML-Code für die Navigationsleiste:

header data-role = "header"> h1> SJV-Rathaus / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Home / a> / li> li> a href =" # Sprecher "data-icon =" star "data-theme =" b "> Sprecher / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Kontaktieren Sie uns / a> / li> / ul> / div> / header>

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

• Codieren Sie ein div-Element innerhalb des Header-Elements. Setzen Sie dann das Datenrollenattribut für das div-Element auf "navbar".
• Codieren Sie innerhalb des div-Elements ein ul-Element, das für jeden Link ein li-Element enthält.
• Codieren Sie in jedem li-Element ein a> -Element mit einem href-Attribut, das einen Platzhalter für die Seite verwendet, zu der der Link führen soll. Setzen Sie dann das Datensymbolattribut auf das Symbol Ihrer Wahl.
• Setzen Sie für das aktive Element in der Navigationsleiste das Klassenattribut auf "ui-btn-active".Dann ist die Farbe dieses Elements heller als die der anderen Elemente in der Navigationsleiste.
• Sie sollten auch das Attribut "Datenthema" verwenden, um auf jedes Element in der Navigationsleiste ein jQuery Mobile-Design anzuwenden. Andernfalls haben die Schaltflächen in der Leiste dieselbe Farbe wie der Rest der Kopfzeile. Weitere Informationen zum Anwenden von Themen finden Sie in Abbildung 15-12.

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.

Die Standardstile, die jQuery Mobile verwendet

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

Wie Sie sehen können, 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.

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.

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 Datenthemaattribut 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 der Gestaltung.

Bitte beachten Sie, dass in der Tabelle in dieser Abbildung angegeben ist, dass das Thema e sparsam verwendet werden soll. Das liegt daran, dass eine orange Farbe verwendet wird, die für die Akzentuierung eines Artikels in Ordnung ist, in großen Dosen jedoch nicht attraktiv ist. Dies wird durch die zweite Kopfzeile und die Navigationsleiste in dieser Abbildung veranschaulicht.

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.

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

header data-role = "header" data-theme = "e"> h1> SJV-Rathaus / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Startseite / a> / li> li> a href =" # Sprecher "data-icon =" star "data-theme =" d "> Sprecher / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Nachrichten / a> / li> / ul> / div> / header>

Die fünf jQuery Mobile-Themen:

Zwei Möglichkeiten, ein Thema anzuwenden:

Mithilfe eines Datenthema-Attributs:

li> a href = "# home" data-icon = "home" data-theme = "b"> Home / a> / li>

Mithilfe eines Klassenattributs, das das Thema angibt:

div> Bar / div>

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.

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 bedienen 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.