Erstellen Sie ein benutzerdefiniertes Thema in jQuery Mobile

  • Erforderliche Kenntnisse: HTML, etwas CSS und JavaScript
  • Benötigt: Nichts weiter als Ihr Lieblings-HTML-Editor und ein Browser
  • Projektzeit: Zwei Stunden
  • Support-Datei

Dies ist ein bearbeiteter Auszug aus Kapitel 11 von jQuery Mobile Web Development Essentials , veröffentlicht von Packt Publishing.

Das Theming in jQuery Mobile ist für den Entwickler unkompliziert und einfach zu verwenden, aber hinter den Kulissen ziemlich aufwendig. Glücklicherweise wird es selten eine Zeit geben, in der Sie alles wissen müssen, was für Sie getan wird. Es lohnt sich jedoch ein wenig Zeit zu verstehen, wie es funktioniert.

Im Lieferumfang von jQuery Mobile ist ein Themenset enthalten, das aus fünf Farbfeldern besteht, die jeweils einem Buchstaben von A-E zugeordnet sind. Das Thema enthält eine Reihe von Basis-CSS-Klassen, die nach Belieben auf nahezu jedes Element angewendet werden können. Sie enthalten globale Einstellungen für Breite, Höhe, Randradius und Schatten. Die einzelnen Farbfelder enthalten spezifische Informationen zu Farbe, Schriftarten usw.



Zusätzliche Farbfelder können zu den fünf Originalmustern von F-Z hinzugefügt werden, oder die Originalmuster können nach Belieben ersetzt oder überschrieben werden. Dieses System ermöglicht insgesamt 26 verschiedene Farbfelder, die Millionen möglicher Kombinationen von Themenfarben, -stilen und -mustern ermöglichen. Sie wenden ein jQuery Mobile-Design auf das ausgewählte Element an, indem Sie ein Datenthema-Attribut mit dem Buchstaben des gewünschten Themas hinzufügen:

Entwickler verwenden beim Anwenden von Stilen im Allgemeinen die Attributmethode 'Datenthema'. Sie können die CSS-Klassennamen jedoch auch direkt an Ihre Seitenelemente anhängen, um eine genauere Steuerung zu gewährleisten. Es gibt eine Handvoll primärer Präfixe, die diese Flexibilität ermöglichen.

01. Bars (.ui-bar-?)

Das Balkenpräfix wird im Allgemeinen auf Kopf- und Fußzeilen sowie andere Bereiche mit hoher Bedeutung angewendet:

02. Inhaltsblöcke (.ui-body-?)

Inhaltsblöcke werden im Allgemeinen auf Bereiche angewendet, in denen Absatztext erwartet wird. Seine Farbe trägt dazu bei, eine maximale Lesbarkeit der darauf platzierten Textfarbe zu gewährleisten:

03. Schaltflächen und Listenansichten (.ui-btn-?)

Schaltflächen und Listenansichten sind zwei der wichtigsten Elemente in der jQuery Mobile-Bibliothek, und Sie können sicher sein, dass sich das Team die Zeit genommen hat, sie richtig zu machen. Das Präfix .ui-btn enthält auch Stile für die Zustände up, down, hover und active:

04. Farbfelder mischen und anpassen

Eines der schönen Dinge beim Thema in jQuery Mobile ist, dass untergeordnete Elemente von ihren übergeordneten Elementen erben, sofern nicht anders angegeben. Dies bedeutet, dass, wenn Sie eine Schaltfläche ohne eigenes Datenthema-Attribut in eine Kopf- oder Fußzeilenleiste einfügen, diese Schaltfläche dasselbe Thema wie ihre übergeordnete Schaltfläche verwendet. Böse wie?

Es ist auch durchaus akzeptabel und sogar empfehlenswert, ein Element mit einem Farbfeld und das untergeordnete Element eines Elements mit einem anderen Farbfeld zu platzieren. Dies kann dazu beitragen, dass das Element besser zur Geltung kommt oder zu einem anderen Teil der App passt oder zu einer vom Entwickler gewählten Argumentation. Es ist möglich und außerdem ist es einfach. Platzieren Sie einfach eine Schaltfläche (oder ein anderes Element) in einer Kopfzeile und weisen Sie ihr ein eigenes Datenthema-Attribut zu:

05. Standortweiter aktiver Status

jQuery Mobile wendet auch einen globalen aktiven Status für alle Elemente an. Dieser aktive Status wird für Schaltflächen, Formularelemente, Navigation und überall dort verwendet, wo angegeben werden muss, dass gerade etwas ausgewählt ist. Die einzige Möglichkeit, diesen Farbwert zu ändern, besteht darin, ihn über CSS festzulegen (oder zu überschreiben). Die CSS-Klasse für den aktiven Status lautet mit dem entsprechenden Namen .ui-btn-active:

06. Standardsymbole

Das jQuery Mobile-Set enthält 18 Symbole, die eine Vielzahl von Anforderungen für Entwickler abdecken. Das Symbolset ist weiß auf transparent, und jQuery Mobile überlagert einen halbtransparenten schwarzen Kreis, um einen Kontrast zu allen Farbfeldern zu schaffen. Geben Sie zum Hinzufügen eines Symbols das Datensymbolattribut mit dem Namen des gewünschten Symbols an:

jQuery Mobile bietet auch die Möglichkeit, Symbole oben, rechts, unten oder links auf einer Schaltfläche mithilfe des Attributs data-iconpos = '[oben, rechts, unten, links]' zu platzieren, wobei links die Standardplatzierung ist. Entwickler können ein Symbol auch allein ohne Text anzeigen, indem sie data-iconpos = 'notext' angeben:

Das Bereitstellen von benutzerdefinierten Symbolen ist ebenfalls möglich und wird später in diesem Kapitel behandelt.

07. Erstellen und Verwenden eines benutzerdefinierten Themas

Wir haben bereits besprochen, wie leistungsfähig Themen in jQuery Mobile sind. Es macht es trivial, eine reichhaltige mobile Website mit einfachem und elegantem Stil zu entwickeln. Noch leistungsfähiger ist die Möglichkeit, eine eigene Farbfeldbibliothek zu erstellen, mit der Sie Ihre Anwendung oder Website wirklich einzigartig machen können. Das Entwickeln eines eigenen Themas kann auf zwei Arten erfolgen:

  1. Laden Sie die vorhandene jQuery Mobile CSS-Datei herunter, öffnen Sie sie und bearbeiten Sie sie nach Herzenslust.
  2. Zeigen Sie mit Ihrem Webbrowser auf ThemeRoller für jQuery Mobile .

Wir werden uns ausschließlich auf Option 2 konzentrieren, denn seien wir ehrlich, warum sollten Sie das gesamte CSS durchgehen, wenn Sie in 10 Minuten auf ein neues Thema zeigen, klicken und ziehen können, das voller Farbfelder ist? Lassen Sie uns herausfinden, worum es bei ThemeRoller geht.

08. Was ist ThemeRoller?

ThemeRoller für jQuery Mobile ist eine Erweiterung einer webbasierten App, die für das jQuery UI-Projekt geschrieben wurde. Mithilfe des Drag-and-Drop-Farbmanagements können Benutzer in wenigen Minuten schnell ein Thema voller Farbfelder zusammenstellen. Es verfügt über eine interaktive Vorschau, sodass Sie sofort sehen können, wie sich Ihre Änderungen auf Ihr Thema auswirken. Es hat auch ein eingebautes Inspektor-Tool, mit dem Sie die kleinsten Details untersuchen können (falls Sie dies wünschen). Es lässt sich auch in Adobe Kuler integrieren, ein Farbmanagement-Tool. Sie können Ihr Thema herunterladen, nachdem Sie fertig sind, es über eine benutzerdefinierte URL für andere freigeben und frühere Themen erneut importieren, um sie in letzter Minute zu optimieren. Es ist ein leistungsstarkes Tool und eine perfekte Ergänzung zu jQuery Mobile.

Eines der Kennzeichen der fünf Standardmuster ist, dass das jQuery Mobile-Team viel Zeit damit verbracht hat, an Lesbarkeit und Benutzerfreundlichkeit zu arbeiten. Die Farbfelder reichen vom höchsten Kontrast (A) bis zum niedrigsten Kontrast (E). Innerhalb eines einzelnen Themas sind die Bereiche mit dem größten Kontrast die Bereiche, die auf der Seite am stärksten hervorgehoben werden. Dies umfasst die Header (und Listenansicht-Header) und Schaltflächen. Wenn Sie ein eigenes Thema erstellen, sollten Sie dies berücksichtigen. Wir möchten uns immer auf die Benutzerfreundlichkeit unserer App konzentrieren, oder? Was nützt eine Slick-App, wenn sie aufgrund der schlechten Farbauswahl niemand lesen kann?

09. ThemeRoller verwenden

Das erste, was Sie beim Laden von ThemeRoller sehen, ist ein gut aussehender Begrüßungsbildschirm, gefolgt von einem hilfreichen Einstiegsbildschirm:

Der Bildschirm Erste Schritte enthält einige hilfreiche Tipps. Sehen Sie sich diese also unbedingt an, bevor Sie auf die Schaltfläche Rolling klicken klicken:

Nachdem alle Begrüßungsbildschirme nicht mehr im Weg sind, wird Ihnen die primäre Benutzeroberfläche angezeigt:

ThemeRoller ist in vier Hauptbereiche unterteilt: Vorschau, Farbe, Inspektor und Werkzeuge. Jede dieser Funktionen enthält wichtige Funktionen, die wir überprüfen müssen. Wir beginnen mit dem Abschnitt Vorschau.

10. Vorschau

Sofern Sie kein vorhandenes Thema laden, werden im Vorschaubereich drei vollständige, identische und interaktive jQuery Mobile-Seiten mit Widgets aller Art angezeigt:

Bewegen Sie die Maus darüber und Sie werden sehen, dass jede Seite funktionsfähig ist. Die Kopfzeile auf jeder Seite enthält einen Buchstaben, der angibt, welches Farbfeld das Erscheinungsbild steuert.

11. Farben

Oben auf der Seite sehen Sie eine Reihe von Farbchips sowie zwei Schieberegler und eine Umschalttaste. Weiter rechts sehen Sie weitere zehn Farbchips, die leer sein sollten. Diese sind den zuletzt verwendeten Farben gewidmet und bleiben leer, bis Sie eine Farbe ausgewählt haben:

Unterhalb der Farbchips befinden sich zwei Schieberegler mit der Bezeichnung Helligkeit und Sättigung. Der Helligkeitsregler passt die hellen und dunklen Töne der Reihe von Farbfeldern an, während die Sättigung die Farben mehr oder weniger lebendig macht. Zusammengenommen sollte ein Benutzer in der Lage sein, nahezu jede Farbe, die er wählt, zu approximieren. Um Farben von Kuler zu verwenden, klicken Sie auf den Textlink mit der Bezeichnung Adobe Kuler-Farbfelder.

Jeder der Farbchips kann auf ein beliebiges Element im Vorschaubereich gezogen werden. Dies macht die Entwicklung eines Farbfeldsatzes extrem einfach. Beachten Sie, dass sich viele der jQuery Mobile-Stile überschneiden. Beispielsweise erhält die Kopfzeile oben auf der Seite denselben Stil wie die Kopfzeile der Listenansicht. Passen Sie die Farben wie gewünscht an und ziehen Sie jeden Chip auf ein Element auf der Seite. Denken Sie daran, dass jede einzelne Seite ein eigenes Farbfeld ist. Achten Sie also darauf, wie Sie Farben mischen.

12. Inspektor

Ganz links auf der Benutzeroberfläche befindet sich das Inspektorfeld, das in zwei Teile unterteilt ist. Der obere Teil enthält Schaltflächen, mit denen Entwickler ihr Thema herunterladen, ein vorhandenes Thema importieren und einen Link zu ihrem Thema freigeben können. Es gibt auch einen Hilfelink für Leute, die dieses Buch nicht gekauft haben:

Der untere Abschnitt enthält eine Reihe von Registerkarten mit den Bezeichnungen Global, A, B, C und +. Jede dieser Registerkarten enthält ein Akkordeonfenster, das alle Werte für ein einzelnes Farbfeld enthält, mit Ausnahme der Registerkarte 'Global', die für alle Farbfelder gilt.

Wählen Sie die Registerkarte 'Global' und klicken Sie auf 'Aktiver Status'. Das Akkordeonfenster wird erweitert, um Einstellungen für den aktiven Status für Ihr gesamtes Thema anzuzeigen. Zu den Optionen gehören Textfarbe, Textschatten, Hintergrund und Rahmen. Das Ändern eines Werts im globalen Bereich bewirkt, dass jedes aktuelle (und zukünftige) Farbfeld die neue Einstellung widerspiegelt.

Zusätzliche Farbfelder können auf zwei Arten zu Ihrem Thema hinzugefügt werden. Durch Klicken auf die Registerkarte + oben im Inspektor wird an der letzten Stelle in Ihrem Thema ein neues Farbfeld hinzugefügt. Sie können auch ein neues Farbfeld hinzufügen, indem Sie auf die Schaltfläche Farbfeld hinzufügen unten im Vorschaubereich klicken. Farbfelder können gelöscht werden, indem Sie die Registerkarte mit dem zu entfernenden Farbfeld auswählen und dann auf den Link Löschen rechts neben dem Farbfeldnamen klicken. Beachten Sie, dass beim Löschen eines Farbfelds vom oberen Rand des Stapels die verbleibenden Farbfelder umbenannt werden.

13. Werkzeuge

Ganz oben auf der Seite befinden sich eine Reihe von Schaltflächen. Mit diesen Schaltflächen können Sie eine Vielzahl von Aufgaben ausführen, die wir gleich behandeln werden. Schauen Sie sich jedoch zunächst die Schaltflächen selbst genauer an:

wie man Fotos von dir auf Facebook privat macht

Sie werden die folgenden Schaltflächen bemerken: einen Schalter, mit dem Sie zwischen der Version 1.1 (aktuelle Version) und der Version 1.0.1 wechseln können, rückgängig machen / wiederholen und eine Umschalttaste für den Inspektor. Wenn Sie diese Option aktivieren, können Sie jedes Widget im Vorschaubereich überprüfen. Wenn Sie den Mauszeiger über ein Widget bewegen, wird dieses Element mit einem blauen Kästchen hervorgehoben. Durch Klicken auf das Element wird das Akkordeonmenü im Inspektorbereich erweitert, um Einstellungen anzuzeigen, die für dieses Element spezifisch sind.

Es gibt vier zusätzliche Schaltflächen, mit denen Sie Ihr Thema herunterladen, ein zuvor erstelltes Thema importieren oder aktualisieren, Ihr Thema für andere freigeben und eine Hilfeschaltfläche verwenden können.

14. Erstellen eines Themas für Notekeeper

Nachdem wir mit der ThemeRoller-Oberfläche vertraut sind, können wir unser erstes Thema erstellen. Anstatt eine abstrakte zu erstellen, erstellen wir eine, die wir tatsächlich für die zuvor erstellte Notekeeper-App verwenden. Beginnen wir einfach damit, eines der vorhandenen Themen zu ändern, die mit jQuery Mobile geliefert werden. Das Team war so freundlich, dass Benutzer die Standardthemen als Ausgangspunkt für neue Themen importieren konnten. Klicken Sie oben links im Fenster auf die Schaltfläche Importieren. Daraufhin wird ein Feld angezeigt, in das Sie den Inhalt eines vorhandenen Themas einfügen können:

Importieren Sie das Standarddesign, indem Sie auf den Link in der oberen rechten Ecke mit dem entsprechenden Titel Standarddesign importieren klicken. Nachdem sich der Textbereich mit CSS gefüllt hat, klicken Sie auf Importieren. Im Vorschaubereich werden Farbfelder von A nach E neu geladen und angezeigt.

Wir werden uns darauf konzentrieren, das weiße Farbfeld D zu ändern, da es unserem Endziel am nächsten kommt. Da wir lieber Farbfeld A als Namen verwenden möchten, löschen wir die anderen Farbfelder, sodass nur noch D übrig bleibt. Denken Sie daran, dass ThemeRoller Farbfelder umbenennt, wenn andere gelöscht werden. Das heißt, wenn Sie das Farbfeld A löschen, wird B zu A, C wird zu D und so weiter.

Fahren Sie fort, bis sich das Farbfeld, das D war, jetzt in der Position A befindet. Löschen Sie abschließend das Farbfeld B (das früher das Farbfeld E war), sodass nur noch das Farbfeld A übrig bleibt:

Dieses Muster sieht gut aus, ist aber etwas langweilig. Lassen Sie uns ein wenig Farbe einbringen, indem Sie den Header in ein schönes Grün ändern. Der einfachste Weg, um zu bestimmen, welche Werte für ein Element geändert werden sollen, ist die Verwendung des Inspektors. Schalten Sie den Inspektor oben auf Ein und klicken Sie dann auf eine beliebige Stelle in der Überschrift von Thema A. Sie werden wissen, ob Sie es richtig verstanden haben, wenn links die Registerkarte A ausgewählt ist und das Bedienfeld Kopf- / Fußzeilenleiste erweitert wird:

Sie können die Farbe auf verschiedene Arten ändern. Sie können einen Farbchip von oben direkt auf den Hintergrund ziehen. Sie können auch einen Farbchip auf ein Eingabefeld ziehen. Schließlich können Sie den Wert manuell eingeben. Beachten Sie, dass Sie beim Klicken in ein Feld mit einem Farbwert einen raffinierten Farbwähler erhalten. Ändern Sie die Werte in den Eingabefeldern in diesem Bereich auf die im vorherigen Screenshot gezeigten Werte.

Sieht gut aus, aber jetzt kollidiert das Blau des aktiven Zustands des Themas mit unserem Grün. Klicken Sie mit dem Inspektor-Tool einmal auf den Abschnitt Ein der Ein- / Ausschaltleiste. Dies sollte dazu führen, dass das Bedienfeld Aktiver Status auf der Registerkarte Global erweitert wird. Wir werden das Blau in ein schönes warmes Grau ändern. Das globale Bedienfeld sollte nun wie folgt aussehen:

Es gibt nur eine Sache, die unser neues Thema davon abhält, am heißesten auszusehen: den blauen Textlink im Absatz oben. Kehren wir zu unserem vertrauenswürdigen Inspektor zurück und klicken Sie direkt auf den Link, der das Inhaltsfenster auf der Registerkarte A erweitert. Für diejenigen, die bereits mit CSS vertraut sind, wissen Sie, dass Sie die Linkfarbe nicht einfach ändern können, ohne auch den Hover, den besuchten: Hover und den aktiven Status zu ändern. Das Problem ist, dass es keine Optionen gibt, um diese Änderungen vorzunehmen, aber ThemeRoller hat Sie abgedeckt. Klicken Sie auf das + rechts neben dem Eingabefeld Linkfarbe, um die restlichen Optionen anzuzeigen, und ändern Sie dann die Farben, wie im folgenden Screenshot gezeigt:

Und das ist das. Nehmen Sie weitere Änderungen an Ihrem Thema vor, während Sie den Inspektorbereich erkunden. Ändern Sie, was Sie möchten, es sind nur Bits und Bytes. Beachten Sie jedoch, dass derzeit keine Option zum Rückgängigmachen verfügbar ist. Wenn Ihnen etwas wirklich gefällt, sollten Sie die Werte aufschreiben, damit Sie sie nicht verlieren oder so exportieren, wie sie sind. Apropos...

15. Exportieren Sie Ihr Thema

Bevor wir unser Thema tatsächlich exportieren, muss eines beachtet werden. Erinnern Sie sich an die Begrüßungsseite mit den 'hilfreichen' Informationen? Es stellt sich heraus, dass es ein Stück gibt, das keine Empfehlung, sondern eine Anforderung ist.

Wir empfehlen, Themen mit mindestens 3 Farbfeldern (A-C) zu erstellen.

Damit unser Thema ordnungsgemäß auf unsere Notekeeper-App angewendet werden kann, müssen wir unser einzelnes Farbfeld (Buchstabe A) auf die Farbfelder B und C duplizieren. Glücklicherweise ist dies eine einfache Sache. Wählen Sie die Registerkarte A oben im Inspektor aus und klicken Sie zweimal auf die Registerkarte +. Was Sie sehen sollten, sind drei identische Farbfelder, und jetzt sind wir fertig.

Nachdem wir unser Thema fertiggestellt haben, werden wir es zur Verwendung in unserer Notekeeper-Anwendung exportieren. Dies ist ein unkomplizierter Vorgang, der mit dem Klicken auf die Schaltfläche Thema herunterladen in der Mitte der Seite oben auf der Benutzeroberfläche beginnt. Sie erhalten ein Feld, in dem Sie Ihr Thema benennen können, einige Informationen zum Anwenden Ihres Themas und eine Schaltfläche mit der Bezeichnung 'Zip herunterladen'. Nachdem Sie unser Thema Notekeeper benannt haben, klicken Sie auf die Schaltfläche 'Zip herunterladen' und Sie erhalten ein leckeres kleines Stückchen in Ihrem Download-Ordner.

Extrahieren Sie den Inhalt der ZIP-Datei und Sie sehen die folgende Verzeichnisstruktur:

  • index.html
  • Themes / Notekeeper.css (Die unkomprimierte Version Ihres Themas) Notekeeper.min.css (Die komprimierte Version. Verwenden Sie diese in der Produktion) images / ajax-loader.gif icons-18-black.png icons-18-white.png icons -36-black.png-Symbole-36-white.png

Die HTML-Datei oben im Baum enthält Informationen zur Implementierung Ihres Themas sowie einige Widgets, mit denen Sie bestätigen können, dass das Thema funktioniert. Alle Links in der Beispieldatei sind relativ, daher sollten Sie sie in ein beliebiges Browserfenster ziehen und die Ergebnisse anzeigen können.

Einige Hinweise zum Herunterladen und Implementieren von Themen:

1. Das jQuery-Team stellt Ihnen aus einem bestimmten Grund die Symbole für Schaltflächen in dieser ZIP-Datei zur Verfügung. Das Thema erfordert, dass diese Bilder relativ zur CSS-Datei sind. Dies bedeutet, dass Sie, wenn Sie nicht bereits die Standardthemen verwenden, auch den Bilderordner einschließen müssen, wenn Sie Ihr Thema auf Ihre Website hochladen. Andernfalls werden die Symbole nicht angezeigt.

zwei. Halten Sie an der unkomprimierten Version Ihres Themas fest . Obwohl Sie es aufgrund der Größe nicht in der Produktion verwenden möchten, benötigen Sie es, falls Sie es jemals in ThemeRoller bearbeiten möchten. ThemeRoller kann zum Zeitpunkt dieses Schreibens die minimierte CSS-Datei nicht importieren.

Andy Matthews ist seit über 16 Jahren Anwendungsentwickler und verfügt über Kenntnisse in UI / UX, Grafikdesign und Programmierung. Er ist Redner, Open Source-Entwickler und lebt mit seiner Familie in Nashville, TN. Er ist @commadelimited auf Twitter.

Raymond Camden ist ein leitender Entwickler-Evangelist für Adobe. Seine Arbeit konzentriert sich auf Webstandards, mobile Entwicklung und ColdFusion. Er ist ein veröffentlichter Autor und hält auf Konferenzen und Benutzergruppen Vorträge zu verschiedenen Themen. Folgen Sie ihm bei @cfjedimaster.