jQuery UI Thema
Alle jQuery UI-Plug-in ermöglicht es Entwicklern, sich nahtlos UI-Widgets, um das Aussehen zu integrieren und ihrer Websites oder Anwendungen fühlen. Jedes Widget wird durch CSS - Stile definiert und enthält zwei Stilinformationen: die Standard - jQuery UI - CSS - Framework Stile und spezifischen Plug-in - Stil.
jQuery UI-CSS-Framework stellt eine semantische Repräsentation der Klasse in die Rolle eines kleinen Teilelemente wie Titel, Inhalt oder klickbaren Bereich anzuzeigen. Dies sind konsistent in allen Kleinteile und eine anklickbare Registerkarte (Tab), Akkordeon (Akkordeon) oder Knopf (Button) die gleiche ui-state-default , Klasse, um zu zeigen , dass sie anklickbar a. Wenn der Benutzer an der Spitze dieser Elemente schwebt, wird die Klasse ui-state-hover , dann werden diese Elemente in gewählten ui-state-active . Die Klasse der Konsistenz macht das Aussehen gleichbleibende Leistung von allen der Elemente oder Komponenten, die eine ähnliche Rolle bei der Interaktion Zustand.
CSS - Style - Rahmen wird in einer separaten Datei verkapselt, mit dem Namen ui.theme.css . Diese Datei durch Themeroller Anwendung zu ändern. Frame-Stil enthält wirken sich nur auf das Aussehen und das Gefühl des Eigentums, so lange wie die Farben, Hintergrundbilder, Icons und so weiter. Das sind also "sicher" Stil, wird es nicht das Plug-in-Funktion beeinflussen. Diese Trennung bedeutet , dass Entwickler in verwenden können theme.css die Farb- und Bilddateien zu ändern , um eine benutzerdefinierte Look and Feel. Da die Zukunft von Plug-Ins oder Bug-Fixes zur Verfügung stehen, und diese können durch das Thema ohne Modifikation verwendet werden.
Da der Rahmen-Stil Deckung nur sehen und fühlen, so muss es schließen spezielle Plug-in-Stylesheets, umfassen diese Stylesheets alle zusätzlichen Widgets funktionalen Struktur Stilregeln, wie Größe, Polsterung, Margen ermöglichen, Positionierung, Schwimmer. Jedes Widget Sheets themes/base - Ordner, und mit dem Plug-in - Namen, wie "jquery.ui.accordion.css". Diese Muster müssen sorgfältig Skripte bearbeitet werden, da sie Stile einen Rahmen bieten Abdeckung zusammen.
Wir ermutigen alle Entwickler Plug-in jQuery zu erstellen, jQuery UI-CSS-Framework macht es einfacher für Endbenutzer benutzerdefinierte Designs zu verwenden und Plug-Ins.
Theming
Hier sind drei der jQuery UI-Widget auf dem allgemeinen Verfahren im Zusammenhang:
- Download von Themeroller Themen: zuerst ein Thema erstellen zu verwenden Themeroller zu erzeugen , und ein Thema herunterladen. Diese Anwendung wird eine neue erstellen
ui.theme.cssDatei und enthält alle notwendigen Hintergrund - Bilder und Symbole SpriteimagesOrdner. Diese Methode ist die erste zu schaffen und das Thema der Weg beibehalten, aber die Möglichkeiten, die sie bietet begrenzte Themeroller Brauch. - Ändern Sie die CSS - Datei: Um das Aussehen und das Gefühl der Kontrollen zu fördern, können Sie aus dem Standard - Theme (Gängigkeit) beginnt, oder von einem Thema , die durch den Themeroller Start und anschließend anpassen
ui.theme.cssDatei, ein separates Plug-in oder eine beliebige Sheet. Zum Beispiel können Sie den Winkel des Radius aller Tasten leicht anpassen aus den Werten anderer UI-Komponenten unterschiedlich ist, oder ein benutzerdefiniertes Symbol verwenden, um den Pfad Assistenten ändern. Styles durch ein wenig Bereich, können Sie sogar mehr als ein Thema in einer Benutzeroberfläche verwenden. Für eine einfachere Wartung, nur die vorgeschlagene Änderungui.theme.cssDateien und Bilder. - Re-write CSS custom: Um die Kontrolle das Aussehen zu maximieren und fühlen, können Sie wieder mit dem Schreiben beginnen für jedes Widget und CSS, ohne die Verwendung von Plug-in - Framework - Klassen oder einem bestimmten Sheet. Wenn Sie sehen wollen und das Gefühl kann durch Modifikation des CSS oder mit sehr individuelle Tags erreicht werden, dann können Sie diese Methode verwenden. Dieser Ansatz erfordert umfassendes Know-how in CSS Bedingungen und erfordern manuelle Updates für eine zukünftige Plug-Ins.