Grundlagen der jQuery und jQuery UI CSS-Layout
Die Macher von jQuery und jQuery UI CSS machen einen guten Job der Einbauten ihrer Bibliothek zu dokumentieren. Aus einer CSS-Perspektive, fand das Material an jqueryui.com sagt Ihnen, über die die Ausgabe verwendet Stile erstellen Sie an verschiedenen Orten gesehen haben. Hier ist eine gute Vorstellung davon, wie die erste Seite der Dokumentation angelegt.
Eines der ersten Dinge, die Sie auf dieser Seite bemerken ist, dass die Entwickler empfehlen Sie verwenden Themeroller, um die Änderungen, wann immer möglich zu machen. Allerdings gibt es viele Fälle, in denen Themeroller einfach nicht den Job zu erledigen, so müssen Sie die Änderungen in einem eher traditionellen Art und Weise zu machen.
Die Klassen sind unterteilt in zwei Dateien mit einer Reihe von Arten innerhalb jeder Datei:
jquery.ui.core.css: Enthält alle Stile, die Strukturelemente in irgendeiner Weise beeinflussen. Diese beinhalten
Layout-Helfer: Bestimmt die Gesamt-Layout der Objekte onscreen- es möglich, die Interaktion mit assis TECHNOLOGIES- macht und stellt ein Verfahren zum Rücksetzen des Layout nach Bedarf.
Interaktion Hinweise: Definiert, wenn ein Objekt deaktiviert.
Icons: Gibt den Symbolstatus.
Overlays: Bestimmt die Größe und Position des Overlays.
jquery.ui.theme.css: Definiert alle Stile, die thematische Elemente beeinflussen, wie Farbe, Schriftart und Hintergründe. Diese beinhalten
Komponentenbehälter: Legen Sie das Erscheinungsbild von Inhalten innerhalb verschiedener Objektcontainer. Die Behälter umfassen in der Regel das gesamte Objekt, Objekt-Header und Objektdaten (angegeben als Inhalt innerhalb der Stile).
Interaktion heißt es: Bestimmen Sie das Aussehen eines Objekts, wenn spezifische Interaktion Zustände auftreten. Die vier Interaktion Zustände sind: Standard (wenn nichts wird mit dem Objekt geschieht), schweben (wenn sich der Mauszeiger über dem Objekt), aktiv ist (wenn der Benutzer tatsächlich eine Aufgabe mit dem Ziel durchführen) und Fokus (wenn der Benutzer hat das Objekt ausgewählt, aber tut nichts damit nicht).
Interaktion Hinweise: Bestimmen Sie das Aussehen eines Objekts, das in einem bestimmten Zustand ist der Benutzer zu helfen, den Status des Objekts zu verstehen.
Die Interaktion Cues sind: Highlight (das Objekt oder den Inhalt ist für die Interaktion ausgewählt) - Fehler (ein Fehler mit einem Objekt aufgetreten) - Fehlertext (ein Fehler mit Inhalt aufgetreten ist, in der Regel Text innerhalb eines Objekts) - deaktiviert (das Objekt oder Inhalte sind deaktiviert) - primäre (ein Objekt ist, das primäre oder First-Level-Objekt in einer Hierarchie von Objekten) - und sekundäre (ein Objekt ist, das sekundäre oder Second-Level-Objekt in einer Hierarchie von Objekten).
Icons: Definieren Sie den Zustand und die Positionierung der mit einem Objekt verwendeten Symbole. Der Staat und die Positionierung separat gesteuert werden. Die Zustandsinformation bestimmt, ob das Symbol Teil eines Kopf- oder den Inhalt ist. Darüber hinaus bestimmt er über den Status des Symbols Formatierung basiert: default, schweben, aktiv, markieren, Fehler- und Fehlertext. Icons sind individuell basierend auf Symbolnamen, wie .ui-icon-Karat-1-n positioniert.
Die Symbole sind eigentlich im Blockformat als Teil der Staaten und Bilder Abschnitt des Icons Teil der Datei definiert.
Sie können das Widget-spezifische Symbol Bilder zu sehen auf Hier.
Die Standardsymbolbilder erscheinen Hier.
Sie können die aktive Symbolbilder finden Hier und diejenigen, wird zur Hervorhebung Hier.
Wenn eine Anwendung ein Fehler auftritt, sehen Sie die Liste der Symbole Hier.
Eckenradius: Schafft abgerundeten Ecken auf die verschiedenen Objekte.
Overlays: Hiermit werden die Formatierung von Inhalten innerhalb von Overlays und die Formatierung des Overlay-Schatten (so dass Sie sehen können, gibt es ein Objekt hinter dem Objekt in der Front).
Um besser zu verstehen, wie die Dinge funktionieren, dann ist es eine gute Idee, um den tatsächlichen Dateien zu suchen. Sie können die erste Datei an einem Ort, zB https://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.core.css wo https://code.jquery.com/ui/ die Basis-URL ist, 1.9.2 ist die Version von jQuery oder jQuery UI in Frage, und Themen / base / jquery.ui.theme.css ist die spezifische Dateipfad.
Um eine Kopie des CSS für eine andere Version von jQuery oder jQuery UI zu erhalten, ändern Sie einfach die Versionsnummer Teil der URL. Die zweite Datei an einer Stelle wie https://code.jquery.com/ui/1.9.2/themes/base/jquery.ui.theme.css gefunden. Dies ist, was Sie sehen, wenn bei jquery.ui.core.css suchen.
Anzeigen der Dateien liefert Informationen darüber, wie die verschiedenen Arten aufgebaut sind, so können Sie Änderungen sicher zu machen. Darüber hinaus enthalten die Dateien oft Notizen. Zum Beispiel, wenn Sie auf jquery.ui.theme.css suchen, finden Sie, dass eine der Arten tatsächlich veraltet ist (nicht mehr unterstützt), da diese Notiz, die Sie sagt:
/ * Ui-icon-seek-first ist veraltet, verwenden Sie ui-icon-seek-Start statt * /
Der Stil wird kommentiert, so dass Sie nicht verwenden können. Allerdings ist die Note noch wichtig, weil es zeigt Ihnen, welche Art anstatt zu verwenden.