Mobile App Design / Dev Benutzerdefinierte Designs mit jQuery Mobile

In unserem früheren jQuery Mobile-Tutorial hatte ich einen Großteil des zugrunde liegenden Frameworks und der Einrichtung Ihrer ersten Website vorgestellt. Die JS-Bibliothek ist leicht und in Bezug auf Lernschwierigkeiten leicht zu erlernen. In den Dateien ist außerdem ein CSS-Stylesheet enthalten, mit dem Sie die Elemente in Ihrem Layout weiter anpassen können.

Für dieses zweite Segment möchte ich ein wenig Zeit damit verbringen, tiefer in diese Idee der jQuery Mobile-Themen einzutauchen. Die gesamte Designbranche wurde durch jQM revolutioniert, und der Aufbau einer mobilen Vorlage von Grund auf wurde erheblich verbessert. jQuery Mobile ist nicht nur eine Skriptbibliothek, sondern ein komplettes Grundgerüst zum Aufbau und zur Erstellung effizienter mobiler Vorlagen.

Standard-Stylesheet-Inhalt

Ich sollte damit beginnen zu klären, welche Art von CSS-Code in den Standarddateien enthalten ist. Das Stylesheet von jQM 1.0 wurde in zwei Hauptsegmente aufgeteilt - Struktur und themen.

Der Strukturcode ist das, was Sie meistens ignorieren können. Dies wird verwendet, um Ränder, Abstand, Höhe / Breite und Schriftartvarianten sowie viele andere Browser-Standardeinstellungen festzulegen. Die internen Themen werden dann von A-E getrennt, die jeweils unterschiedliche visuelle Effekte in Ihrem Entwurf steuern. Dies kann Hintergrundfarben, Farbverläufe, Schlagschatten usw. sein.

Jedes dieser inneren Themenelemente kann auch als bezeichnet werden Farbfelder. Wenn Sie eine mobile Vorlage erstellen, bleiben Sie im Allgemeinen bei einem einzelnen Thema. In fast jedem Szenario kann das Design jedoch mit unterschiedlichen Farbschemata verbessert werden. Das Standard-Stylesheet enthält nur die Farbfelder A-E, Sie können jedoch die Farbfelder F-Z erstellen, um weitere 21 Alternativen in Ihre Motivbibliothek einzufügen. Nur um diese Bedingungen noch einmal zu klären a Thema wird als eine einzige CSS-Datei betrachtet, die bis zu 26 verschiedene enthalten kann Farbfelder beschriftet von A-Z.

Stile wechseln

Wenn Sie keine Farbfelder angeben, bleibt jQuery Mobile standardmäßig bei Farbfeld A. Wenn Sie nicht bereits darüber informiert waren, verwenden die jQuery Mobile-Dokumente HTML5-Datenattribute für viele interne Funktionen. Eine davon umfasst das Ändern von Farbfeldern über das Datenthema-Attribut. Sehen Sie sich mein Codebeispiel unten an, um zu sehen, was ich meine.

  Standard jQM-Seite
 
  Hier sind einige interne Inhalte.

Beachten Sie, dass ich das Datenthema-Attribut in der Stammseite div platziert habe. Dies bedeutet, dass die neue Farbfeldfarbe alles, was sich darin befindet, einschließlich der Kopf- und Inhaltsbereiche, beeinflusst. Ich könnte zusätzlich hinzufügen data-theme = "c" in den Header div, um nur den Inhalt der restlichen Seite zu ändern.

Bestandteile eines Musters

Es sollte ziemlich einfach sein, wie diese verschiedenen Farbfelder in einem einzigen Layout implementiert werden können. Schauen wir uns nun den CSS-Code von jQM an, um einzelne Komponenten eines Farbfelds aufzuschlüsseln. Schauen Sie sich die neueste jQuery Mobile 1.4.5-CSS-Datei an, die auf ihrem eigenen CDN gehostet wird.

Sie sollten beachten, dass jedes Farbfeld durch einen bestimmten Kommentar getrennt ist und jede der internen Klassen mit der entsprechenden Beschriftung endet. Zum Beispiel .ui-bar-a und .ui-body-a werden standardmäßig in den Kopf- / Fußzeilen und Inhaltsbereichen angewendet. Bei den meisten Eigenschaften werden Schrift- und Verknüpfungsfarben, Hintergrundverläufe und andere kleine Details zurückgesetzt. Ich habe einfach das aufgenommen ui-bar-a Codes, um Ihnen eine Vorstellung davon zu geben, auf welche Elemente wir zielen.

/* EIN ----------------------------------------------- ------------------------------------------ * / .ui -bar-a border: 1px fest # 2A2A2A; Hintergrund: # 111111; Farbe: #ffffff; Schriftdicke: fett; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# 3c3c3c) bis (# 111)); / * Saf4 +, Chrome * / Hintergrundbild: -webkit-linearer Gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (# 3c3c3c, # 111); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (# 3c3c3c, # 111); / * IE10 * / Hintergrundbild: -o-linearer Gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / Hintergrundbild: linearer Gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a-Eingabe, .ui-bar-a auswählen, .ui-bar-a-Textbereich, .ui-bar-a-Taste Schriftfamilie: Helvetica, Arial, sans- Serife;  .ui-bar-a .ui-Link-Vererbung color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; Schriftdicke: fett;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: besuchte color: # 2489CE / * a-bar-link-besuchte * /;

Wenn Sie nur nach einem benutzerdefinierten Farbfeld suchen, empfiehlt es sich, die Vorlage auf einem der Originale aufzubauen. Der Prozess wird reibungsloser ablaufen, wenn Sie Codes in ein neues CSS-Dokument schreiben. Sie haben nicht die Mühe, die Originaldatei zu bearbeiten, und Sie können mit der Arbeit an einem sauberen Fenster beginnen. Die wichtigsten Bereiche, auf die Sie sich konzentrieren möchten, umfassen Folgendes:

Kopf- und Fußzeilen
Textinhalt und Seitentext
Listenstile
Die Schaltfläche gibt Standard / Hover / Aktiv an
Formulareingabe-Steuerelemente (extra)

Kodierung eines neuen Bar-Designs

In derselben CSS-Datei haben wir uns den gesamten Code A (Zeile 12-150) in eine neue Datei kopiert / eingefügt. Wir können den Farbfeldnamen G verwenden, um diese neuen Stile zu implementieren. Nach dem Kopieren des Codes müssen Sie nun jede Klasseninstanz umbenennen, die auf endet -ein zu -G, So erkennt jQuery Mobile die zu verwendenden Stile.

Ich möchte mit der Neugestaltung der Kopfleiste bg beginnen, um einen bekannteren iOS-Verlauf zu simulieren. Dies kann nur innerhalb der .ui-bar-g Wähler. Wir möchten die Hintergrund- und Hintergrundbild-Eigenschaften bearbeiten, um die Gradienteneffekte nach oben zu ändern. Schauen Sie sich unten meinen Code und einen Demo-Bildschirm des neuen Farbverlaufs an.

.ui-bar-g border: 1px fest # 2d3033 / * a-bar-border * /; Rahmen links: 0px; Rand rechts: 0px; Hintergrund: # 6d83a1; color: #fff / * a-bar-color * /; Schriftdicke: fett; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-Schattenradius * / # 3e4957; Hintergrundbild: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# b4bfce), Farbstopp (0,5, # 899cb3), Farbstopp (0,505, # 7e94b0), bis (# 6d83a1)); Hintergrundbild: -webkit-linearer Gradient (oben, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (oben, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / Hintergrundbild: -o-linearer Gradient (oben, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / Hintergrundbild: linearer Farbverlauf (oben, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Ich verwende das blaue Farbschema der meisten Standard-iOS-Anwendungen. Bei Geräten, die keine CSS3-Farbverläufe darstellen können, ist mein Hintergrund anfangs auf eine durchgehende Farbe eingestellt. Anschließend verwende ich Farbstopps um die 50% -Markierung, um den traditionellen Glanzeffekt im Apple-Stil wieder herzustellen. Auch innerhalb des gleichen Selektors habe ich den Textschatten mit einer subtileren Farbe und einem etwas kleineren Bereich geändert.

Schaltflächen und Texteffekte

Bei der Codierung von Farbfeldern ist es besonders wichtig, genau zu berücksichtigen, welche Bereiche der Benutzeroberfläche Aufmerksamkeit erfordern. Die Kopfzeile sieht mit diesem neuen Hintergrund gut aus, aber eine letzte Änderung, die ich gerne vornehmen würde, wird den Stilen der Schaltflächen entsprechen, die denen von iOS-Apps ähneln.

.ui-btn-up-g border: 1px fest # 375073; Hintergrund: # 4a6c9b; Schriftdicke: fett; Farbe: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; Box-Schatten: keine; -webkit-box-shadow: keiner; -Moz-Box-Schatten: keine; Hintergrundbild: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 89a0be), Farbstopp (0,5, # 5877a2), Farbstopp (0,505, # 476999), bis (# 4a6c9b)); Hintergrundbild: -webkit-linearer Gradient (oben, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (oben, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / Hintergrundbild: -o-linearer Gradient (oben, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / Hintergrundbild: linearer Gradient (oben, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); Grenzradius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner Randradius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px fest # 1b49a5; Hintergrund: # 2463de; Schriftdicke: fett; Farbe: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; Box-Schatten: keine; -webkit-box-shadow: keiner; -Moz-Box-Schatten: keine; Hintergrundbild: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 779be9), Farbstopp (0,5, # 376fe0), Farbstopp (0,505, # 2260dd), bis (# 2463de)); Hintergrundbild: -webkit-linearer Gradient (oben, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: -moz-linearer Gradient (oben, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / Hintergrundbild: -ms-linearer Gradient (oben, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / Hintergrundbild: -o-linearer Gradient (oben, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / Hintergrundbild: linearer Gradient (oben, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); Grenzradius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Der Codebereich, den wir gerade bearbeiten, befindet sich in den Klassen der UI-Schaltflächen. Es gibt 3 verschiedene Modi, die Sie berücksichtigen sollten: .ui-btn-up-g, .ui-btn-hover-g, und .ui-btn-down-g. Ich konzentriere mich hauptsächlich auf die Standard (btn-up) und Hover (btn-hover) Effekte, indem ich die Boxschatten und linearen Farbverläufe bearbeite. Außerdem habe ich den Effekt der abgerundeten Ecken erweitert, damit die Schaltflächen rechteckiger wirken.

Aus diesem Grund musste ich den inneren Randradius aus einer Klasse mit dem Titel entfernen .ui-btn-inner. Diese Klasse wird innerhalb jedes Ankerlinks in Ihrer Kopfleiste an ein Spannelement angehängt. Wenn Sie die Grenzradien-Eigenschaften nicht zurücksetzen, werden Sie immer kleine Störungen im Design feststellen, wenn Sie mit der Maus über eine Schaltfläche fahren. Wenn Sie in jQuery Mobile-Themes mehr Zeit für das Codieren verwenden, merken Sie sich diese kleinen Nuancen für zukünftige Projekte.

Einführung in ThemeRoller

Wenn Sie Ihre Hände gerne mit Code schmutzig machen, empfehle ich Ihnen dringend, die benutzerdefinierten Bearbeitungen beizubehalten. Sie haben nicht nur mehr Kontrolle, es ist auch viel einfacher, Probleme innerhalb des CSS zu beheben, wenn Sie alle Änderungen selbst vorgenommen haben. Für viele Designer ist dieser Prozess jedoch langwierig und dauert einfach länger als nötig. Glücklicherweise hat das jQuery Mobile-Team einen Online-Editor unter dem Namen ThemeRoller veröffentlicht.

Auf dieser Seite können Sie die ersten 3 A-C-Farbfelder bearbeiten oder sogar eines Ihrer eigenen erstellen. Wenn Sie in die linke Seitenleiste schauen, können Sie zwischen diesen 3 Einstellungen wechseln oder schnell Änderungen an den globalen Designoptionen vornehmen. Dazu gehören CSS-Eigenschaften wie Umrandungsradien, Rahmenschatten oder Standardseitenschriftarten. Wenn Sie eines der voreingestellten Farbfelder auswählen, können Sie nur die gleichen Bereiche wie zuvor bearbeiten - obere / untere Leiste, Körperinhalt und die 3 Schaltflächenzustände.

Mein Lieblingsfeature ist jedoch der direkte Zugriff auf Adobe Kuler-Farbfelder. Sie können tatsächlich einige Farbschemata in Ihrem Kuler-Konto erstellen und diese in ThemeRoller importieren. Die Benutzeroberfläche unterstützt die Drag-and-Drop-Funktion, so dass es sehr einfach ist, innerhalb weniger Minuten ein paar verschiedene Ideen auszuprobieren.

Letztendlich gibt es keine absolute Methode zum Erstellen Ihrer jQM-Farbfelder. Einige Designer bevorzugen Hard-Code-CSS, während andere die intuitive ThemeRoller-Web-App lieben werden. Solange Sie der Klassenstruktur folgen, sollten Sie in beiden Fällen dieselben Ergebnisse erzielen.

Hilfreiche Ressourcen

jQuery Mobile-Designs - Dokumentation
JQuery Mobile-Designs verwenden und anpassen